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Preface 



Cela fait maintenant une bonne quinzaine d'annees que je travaille dans le domaine de 
Tinformatique, et done une bonne quinzaine d'annees que je suis avec passion les evolu- 
tions de l'industrie du logiciel. 

Avec quinze a vingt ans de recul, on constate une alternance assez reguliere de modeles 
d' architectures applicatives destinees a s'executer tan tot sur un serveur, tantot sur le client. 

Historiquement, les grandes applications metier etaient ecrites pour fonctionner sur de 
gros serveurs d'entreprise - les mainframes - auxquels etaient raccordes plusieurs termi- 
naux passifs via un reseau local. Au debut des annees 1990, est survenue une premiere 
transformation du paradigme a travers le modele nomme client-serveur. Capitalisant sur 
la puissance de traitement encore inexploitee des PC, cette architecture applicative 
rompait avec la logique existante qui limitait alors 1' usage des PC a de simples postes 
dedies a la bureautique. Cette evolution etait egalement marquee par une amelioration de 
l'ergonomie et de la reactivite des interfaces utilisateurs, avec notamment l'utilisation 
de la souris et des controles visuels qui sont devenus notre quotidien. 

A la fin des annees 1990, a lieu la seconde transformation du paradigme avec la decou- 
verte d'Internet et de ses techniques et langages associes. II devient rapidement evident 
qu'il faut aller au-dela de l'lnternet proposant uniquement des contenus via des sites Web 
pour envisager le reseau des reseaux comme une plate-forme d'execution pour de veri- 
tables applications en mode Web. Des technologies telles que ASP, PHP, le modele J2EE 
et ASP.NET viennent repondre a ce nouveau defi. 

Apres, l'histoire s'accelere. Le reseau s'elargit, sort du cadre de l'entreprise ou d'un 
departement, et s'etend rapidement a la planete entiere en passant de debits modestes de 
10 Mbits/s a des capacites de l'ordre du gigabit. En parallele, les utilisateurs se familiari- 
sent a une vitesse prodigieuse avec les outils et les interfaces issus de l'lnternet jusqu' a 
trouver naturelle l'idee selon laquelle une application d'entreprise n'est pas obligee de 
posseder une interface utilisateur terne et austere pour etre serieuse et efficace pour ses 
usagers. 

Les technologies evoluent en offrant des experiences utilisateurs toujours plus riches sur 
des interfaces Web : 1' utilisation de code JavaScript execute sur le client, au sein du navi- 
gateur, marque en 2006 le debut de l'epopee du Web 2.0 dans le grand public, dont Ajax 
est l'une des dimensions techniques indissociables. Les entreprises commencent alors a 
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s'interesser a ces technologies RIA, non pas pour leur attrait visuel, mais parce que les 
ameliorations en matiere d'ergonomie et d'usabilite qu'elles apportent relevent des 
derniers domaines qui recelent des gisements de productivity non encore totalement 
exploites. 

Cela etant, bien que tres couramment utilisees sur le Web grand public, les interfaces 
d' applications realisees integralement en technologie Adobe Flash restent tout de 
meme l'exception en entreprise. En effet, les developpeurs et les architectes applicatifs 
demeurent generalement frileux face a cette technologie qu'ils estiment caricaturale- 
ment uniquement capable de realiser des bannieres de publicite animees pour les sites 
de e-commerce. 

C'est plus recemment avec Parrivee sur le marche de Adobe Flex que le sujet des applica- 
tions RIA en entreprise a ete relance. C'est dans ce contexte que Microsoft a developpee 
la technologie Silverlight, sa nouvelle plate -forme qui puise ses racines dans son ainee 
WPF et dans .NET. 

Silverlight est une technologie qui capitalise sur le meilleur des deux mondes et qui 
permet de realiser des interfaces clients d' applications de type « Software + Services », 
qui proposent un acces « sans couture » depuis les donnees publiees sur le reseau local de 
P entreprise jusqu'aux services distants au travers de Plnternet, materialisant le concept 
du « Web en tant que plate-forme » et du Cloud Computing. 

Avec Silverlight 2, qui est le sujet de ce livre, cette vision architecturale s'est encore affir- 
mee et la richesse des interfaces utilisateurs RIA, que la technologie permet de realiser, 
n'a pas grand chose a envier aux meilleures interfaces d' applications Windows natives 
realisees en WPF sur le client. 

Silverlight 2 se distingue particulierement par la facilite avec laquelle il permet de melan- 
ger et d'utiliser tous les formats et tous les medias existants : texte, donnees XML, son, 
video, animations... Cette capacite, combinee a une gestion intelligente du streaming et a 
des fonctionnalites uniques telles que le Deep Zoom, permet de creer des experiences 
utilisateurs infiniment riches et agreables capitalisant sur des interfaces immersives et 
intuitives. Toutes sortes de scenarios applicatifs sont imaginables depuis P amelioration 
de la navigation et des catalogues produits dans des sites de e-commerce jusqu'aux 
domaines du jeu et de P entertainment, en passant par la dynamisation de la presentation 
des tableaux de bord en entreprises, etc. 

De plus, si Pon se place du point de vue du developpeur, Silverlight a ete pense pour une 
prise en main rapide (a travers les deux families d'outils Suite Expression et Visual 
Studio) et pour une ubiquite de deploiement (les applications Silverlight peuvent 
s'executer sur Windows et sur Mac OS X, et demain egalement sur Linux via le projet 
Open Source nomme Moonlight, dans les navigateurs Web Internet Explorer, Safari et 
Firefox). 

Silverlight 2 est accessible a tout developpeur ayant une petite experience en .NET. Cet 
ouvrage utilise d'ailleurs C# et VB.NET pour ses exemples. Si vous cherchez un livre 
pour apprendre C#, sachez qu'il en existe justement un, du meme auteur et chez le meme 
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editeur. En effet, Gerard Leblanc n'en est pas vraiment a son coup d'essai avec cet 
ouvrage, il a deja signe de nombreux titres sur les langages C, C++ et C#. C'est d'ailleurs 
avec deux de ses livres que j'ai appris le C, il y a maintenant quelques annees de 5a ;) 

Merci Gerard pour ta passion toujours renouvelee au cours de ces annees, merci pour 
avoir redige ce livre qui va devenir - j'en suis certain - le livre de chevet de bon nombre 
de developpeurs curieux d'apprendre a maitriser cette plate-forme si prometteuse que 
nous apprecions tout particulierement ! 

Christophe Lauer 

Responsable des Relations avec les Agences Interactives, Microsoft France 
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Introduction a Silverlight 2 

On peut faire remonter la naissance d'Internet en 1991, annee ou Timothy Berners-Lee et 
Robert Cailliau ont concu et mis au point, a 1' usage interne des scientiriques du CERN 
(Centre europeen pour la recherche nucleaire), un systeme d'acces a des documents. Ce 
systeme, qui devait etre independant des machines utilisees, etait base sur un protocole 
qu'ils ont appele HTTP (regies de communication pour appeler et obtenir une 
page HTML), ou HT signirie Hyper Text. Les documents devaient etre formates a l'aide 
de balises conformes a la norme qu'ils ont appele HTML (regies et significations de ces 
balises), ou HT signirie egalement Hyper Text. Tout tournait done autour de ces deux 
lettres « HT » : du texte avec des liens, dits « hyperliens », pour passer d'un document a 
un autre. 

II a ensuite fallu peu de temps pour que cette innovation technologique sorte des labora- 
toires du CERN et fasse une entree en force - avec le succes que Ton connait - dans les 
milieux academiques et les grandes entreprises tout d'abord, puis parmi le grand public 
peu de temps apres. 

En 1994, Netscape version 1 est le premier navigateur a apparaitre sur le marche. II est 
base sur le navigateur Mosaic (developpe dans un centre de recherche americain, le 
NCSA {National Center for Supercomputing Applications), le premier a integrer les 
images dans le texte (elles etaient auparavant affichees dans une autre fenetre). 

A cette epoque, Internet donne satisfaction pour la consultation de documents et meme de 
catalogues commerciaux eparpilles dans le monde entier, tout cela sans que l'utilisateur 
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ait a se preoccuper de leur localisation. Cependant, il n'en va pas de meme lorsqu'il 
s'agit de passer commande... En 1995, le concept de CGI (Common Gateway Interface) 
est alors introduit, technique qui permet de transmettre des donnees (nom, adresse de 
livraison et surtout numero de carte bancaire) au serveur, chez l'hebergeur du site Web : 
l'utilisateur clique sur un bouton generalement libelle Submi t (sur la machine de l'utilisateur 
done) et un programme est execute sur le serveur. Meme si cette programmation s'avere 
peu performante (un nouveau programme s' execute a chaque requete d'un client), la tech- 
nique a le merite d'exister et offre de tres encourageantes perspectives pour le commerce 
electronique. Pour que la reussite soit totale, il reste a ameliorer le systeme et surtout a 
attirer le chaland ! 

En 1996, Netscape introduit un interpreteur dans son navigateur. Celui-ci, d'abord 
baptise LiveScript, lit des instructions ecrites en un langage derive du langage C mais 
moins puissant et nettement plus laxiste, sous couvert de simplicite. Le but est de permet- 
tre un traitement local, sur la machine de l'utilisateur. LiveScript est ensuite rebaptise 
JavaScript, uniquement par opportunisme, pour profiter de la vague Java, le tout nouveau 
langage a la mode a cette epoque. JavaScript represente done une premiere tentative pour 
« deporter » des taches dans le navigateur, sur la machine de l'utilisateur. Mais dans les 
faits, il faut bien reconnaitre que JavaScript est surtout utilise pour realiser des effets de 
survol (par exemple, une image qui change lors du passage de la souris). Meme norma- 
lise en ECMAScript, JavaScript est certes adopte par tous les navigateurs dignes de ce 
nom mais cela se fait avec tres peu de coordination, surtout dans la maniere d'acceder et 
de manipuler par programme les differents elements de la page HTML. Heureusement, le 
comite de normalisation W3C met un peu d'ordre dans tout cela en faisant adopter une 
norme pour regir ce que Ton appelle le DOM, e'est-a-dire le Document Object Model 
(methodes d'acces et de manipulation des elements HTML de la page). Cette norme nous 
influence encore, meme dans Silverlight (il est en effet possible en Silverlight de manipu- 
ler des elements traditionnels du HTML). 

Les pages Web se repandent ensuite de maniere phenomenale dans le grand public, qui 
fait preuve d'une belle Constance dans sa demande incessante de nouveautes. A partir de 
1996, on commence a voir apparaitre des pages Web agrementees d'animations grace a 
Flash (d'abord Shockwave Flash, puis Macromedia Flash et aujourd'hui Adobe Flash). 
Si les graphistes sont alors seduits par Flash (et le sont souvent encore), son modele de 
programmation suscite moins d'enthousiasme de la part des programme urs. A quelques 
exceptions pres (qui peuvent etre remarquables d'ailleurs), Flash reste essentiellement un 
outil pour graphistes et ne beneficie pas d'un reel support des equipes de developpement. 
La breche et Tangle d'attaque n'echappent manifestement pas a Microsoft. . . 

En 2002, Microsoft introduit la technologie ASP.NET qui permet de preparer sur un 
serveur des pages Web (constitutes exclusivement de HTML et de JavaScript) et de 
repondre (sur le serveur) a des evenements declenches dans le navigateur, e'est-a-dire 
chez le client (par exemple, un clic sur un bouton mais pas seulement). ASP.NET, tout 
comme la technologie similaire et concurrente PHP (Hypertext Preprocessor), fait partie 
de ce que Ton appelle la « programmation serveur », generalement avec acces (a partir 
du serveur uniquement puisque presque toute 1' intelligence est sur le serveur) a une base 
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de donnees se trouvant sur le meme serveur ou sur un autre, dedie a la base de donnees. 
Les solutions basees sur ASP.NET et PHP sont bien adaptees au commerce electronique 
mais elles sont incapables de rivaliser avec les applications Windows en termes d'interactivite 
et de convivialite. 

Pour pallier cette rigidite, Ajax apparait alors. II s'agit d'une technologie qui consiste a 
« deporter » sur le client, mais d'une maniere qui reste quand meme assez limitee et 
toujours basee sur JavaScript, des fonctions qui s'executaient auparavant sur le serveur 
(avec un impact sur les performances puisque celui-ci traite simultanement un grand 
nombre d' applications Web utilisees par un tres grand nombre de clients). 

L'histoire ne fait guere de mystere quant a la direction qu'il convient de prendre. . . 

En 2007, Microsoft introduit Silverlight version 1, lequel est encore base sur JavaScript 
(grosse deception...) mais permet d'ecrire des pages Web integrant essentiellement les 
animations (comme Flash) et la video. 

En 2008, avec Silverlight version 2, Microsoft met en marche une machine a gagner. Le 
modele de programmation est cette fois base sur .NET, l'environnement de developpe- 
ment de programmes bien connu des programmeurs Windows pour sa facilite d' utilisa- 
tion et son incomparable puissance dans le developpement d' applications. Ce que Ton 
appelle le framework .NET regroupe un ensemble de classes (autrement dit du code pre- 
ecrit par Microsoft et distribue sous forme d'un run-time qui doit etre en execution sur la 
machine hote). Ces classes facilitent considerablement la tache des developpeurs d'appli- 
cations, qui n'ont plus qu'a assembler des briques logicielles. Le framework .NET cons- 
titue une couche logicielle autour de Windows, laquelle n'interesse pas directement les 
utilisateurs (en pratique, sa presence ne change rien pour eux) mais facilite grandement le 
developpement et 1' execution des programmes mis a leur disposition. 

Le portage a un autre type de plate -forme de l'environnement d'execution de program- 
mes .NET n'a rien de nouveau. En 2003 deja, Microsoft avait porte .NET (en reduisant 
drastiquement sa taille) sur les appareils mobiles que sont les Pocket PC et les smartphones, 
ces GSM tournant sous une version particuliere de Windows. Les developpeurs d'appli- 
cations pour mobiles retrouvaient ainsi leur(s) langage(s) de predilection, les memes outils 
et les memes classes (a quelques restrictions pres) que pour les programmes Windows. 
Et par consequent la meme efficacite. 

Avec Silverlight 2, Microsoft porte ce modele de developpement qui a fait ses preuves 
aux pages Web. Moyennant 1' installation sur la machine des clients de ce que Ton appelle 
le run-time Silverlight (Flash ne precede pas autrement), on peut beneficier de pages Web 
qui offrent les fonctionnalites (a quelques restrictions pres, notamment pour des raisons 
de securite) et la convivialite tant appreciees dans les applications Windows. 

Le run-time existe pour Windows (Vista et XP ainsi que 2000 prochainement), pour Mac 
ainsi que pour Linux, grace au projet Moonlight de Novell, mene en partenariat avec 
Microsoft. II est compatible Internet Explorer, Firefox et Safari. On peut done afhrmer 
que les applications Silverlight sont independantes des navigateurs et des systemes 
d' exploitation. Un run-time Silverlight n'est cependant pas disponible pour les mobiles, 
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meme si des accords (notamment avec le numero 1 mondial) ont ete conclus en vue de 
son portage a ce type d'appareils. 

Une application Silverlight peut etre deployee sur n'importe quel serveur (par exemple, 
Apache), sans qu'il soit necessaire d'y installer des modules additionnels ou d'adopter 
une configuration speciale (ce n'est pas aussi simple pour les applications ASP.NET, qui 
necessitent IIS de Microsoft ou le module additionnel « mono » sur Apache). 

Lors du developpement d' applications Silverlight, le developpeur retrouve les memes 
outils, les memes langages (C# et Visual Basic - VB.NET - mais aussi Python ou Ruby), 
les memes classes (avec quelques restrictions) et la meme facon de developper qu'en 
programmation Windows. 

Un programmeur .NET est done tres rapidement operationnel pour creer des applica- 
tions Web sous Silverlight version 2. Quand on connait les couts de developpement d'un 
logiciel, le gain est appreciable. 

Les applications Silverlight 2 sont done ecrites (essentiellement) en C# et VB.NET, les 
deux langages phares de l'environnement .NET (surtout C# qui supplante maintenant C++, 
en perdition). Par rapport a JavaScript, l'interet est considerable pour le developpeur du 
fait de la puissance de ces deux langages (qui sont orientes objet) et surtout grace a 
l'apport des classes .NET. 

Lors de l'execution d'une application Silverlight 2, les choses se passent de la maniere 
suivante : les instructions C# ou VB ont ete compilees (lors du developpement de 1' appli- 
cation) en un code binaire appele CIL (Common Intermediate Language). Ce code binaire 
(independant de la plate -forme - Windows, Mac ou Linux) est envoye au navigateur du 
client (e'est en fait le HTML qui reclame ce code binaire, voir chapitre 2), puis execute 
par le run-time Silverlight (ce qui, en termes de vitesse d' execution, s'avere nettement 
plus performant que la technique d' interpretation en vigueur pour JavaScript). 

Au chapitre 2, nous presenterons une application dans son integralite et nous explique- 
rons par quel mecanisme le navigateur (inchange pour Silverlight et qui pourtant n'inter- 
prete que les balises HTML et le JavaScript) en vient a faire executer ce code binaire. 

Avec Silverlight, l'interface utilisateur est decrite en XAML (extensible Application 
Markup Language), un formalisme (base sur XML) de description de page. XAML de 
Silverlight est un sous-ensemble du XAML deja cree par Microsoft pour WPF ( Windows 
Presentation Foundation), la nouvelle technologie de description des pages Windows. 
Avec XAML, le developpeur (programmeur ou graphiste) decrit non seulement la page 
avec ses differents composants mais egalement les animations. 

Silverlight est vraiment concu pour que programmeurs et graphistes travaillent en parfaite 
collaboration : Visual Studio (l'outil des programmeurs) et Expression Blend (celui des 
graphistes) operent sur les memes fichiers et toute modification effectuee a l'aide de l'un 
d'eux est automatiquement reconnue et prise en compte par 1' autre. 

Que peut-on faire avec Silverlight ? 



Introduction a Silverlight 2 et installation du logiciel 

Chapitre 1 



La reponse a cette question est simple : Silverlight rend possible le developpement 
d' applications Web au moins aussi interactives et conviviales que les applications Windows. 
La palette des composants Silverlight 2 dans Visual Studio (boutons, zones d'edition, boites 
de listes, grilles de donnees, calendriers, etc.) est aussi impressionnante que celle en program- 
mation Windows. Le modele de programmation evenementielle est aussi le meme. 

Mais l'avantage des applications Silverlight reside dans le deploiement : nul besoin de 
distribuer CD ou DVD, nul besoin d' installer (souvent avec des droits d' administration) 
des logiciels prealablement telecharges et nul besoin d' avoir le framework .NET installe 
sur la machine (bien que le run-time Silverlight le soit). De plus, avec une application 
Web, l'utilisateur dispose toujours des dernieres mises a jour : il suffit a 1' administrateur 
du site Web de les installer sur le serveur pour que les utilisateurs puissent en beneficier 
immediatement. 

Meme si le framework .NET est installe (ce qui n'est possible que sur les machines 
Windows), le run-time Silverlight doit egalement l'etre pour que les applications Silver- 
light puissent etre executees. Les deux run-times n'interferent pas entre eux mais ne colla- 
borent pas non plus. Comme nous l'avons deja mentionne, le run-time Silverlight n'est 
plus limite aux ordinateurs sous Windows puisque des versions Mac et Linux existent. 

De nombreuses applications Silverlight sont en demonstration sur le site http:// 
www.silverlight.net, rubrique Showcase. La figure 1-1 illustre, par exemple, la nouvelle 
maniere de reserver un vol en quelques clics : 



Figure 1-1 
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L'interface utilisateur est sans comparaison avec ce qui etait disponible auparavant. 
Quant a l'acces aux donnees, on retrouve toutes les possibilites offertes par les program- 
mes Windows, notamment grace aux services Web. 

Vous pourrez egalement visualiser une demonstration de gestion integree dans le 
domaine medical (figure 1-2). 



Figure 1-2 
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Tout au long de cet ouvrage, nous aurons T occasion de passer en revue les etonnantes 
possibilites de Silverlight version 2. 

Microsoft autorise le deploiement d' applications Silverlight 2 depuis la sortie de 
Silverlight 2 beta 2, sous licence « go-live », ce qui n'implique qu'une seule obligation : 
effectuer la mise a jour des la sortie officielle de Silverlight 2 ou retirer les pages. Aucunes 
royalties ne sont et ne seront reclamees par Microsoft pour V utilisation ou le deploiement 
de sites bases sur Silverlight 2. 

Les hebergeurs n'ont aucune raison de vous reclamer des cofits supplementaires puisque 
le fait de deployer des applications Silverlight 2 ne change strictement rien pour eux. Si 
vos simples pages HTML sont acceptees par votre hebergeur, vos pages Silverlight 2 le 
seront egalement. 
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Installation du logiciel 

Le run-time Silverlight 2 est disponible pour Windows Vista et XP (Windows 2000 est 
prevu), Mac OS X ainsi que les navigateurs IE7 (et suivants), Firefox (y compris la 
version 3) et Safari. 

Une version (mise au point en partenariat avec Novell, sans etre developpee par Microsoft) 
devrait etre disponible prochainement (elle est deja en demonstration) pour les ordinateurs 
sous Linux grace au projet Moonlight de l'equipe Mono (http://www.mono-project.com/ 
Moonl i ght/). Pour information, Mono est 1' implementation de .NET sous Linux. 

Linstallation du run-time est automatique, apres acceptation par l'utilisateur. II suffit que 
celui-ci visite une page Web epicee de Silverlight pour qu'il soit invite a installer le run- 
time Silverlight. Celui-ci occupe 4,6 Mo et 1' operation dure moins d'une minute, sans 
necessiter de droits d' administration ou de redemarrage de la machine. 

Pour developper des applications Silverlight, vous devez tout d'abord etre sous Windows. 
Telechargez et installez Visual Studio 2008 en francais (une version d' evaluation de 
90 jours est disponible a l'adresse suivante : http://silverlight.net/GetStarted). Des la 
sortie de la version officielle, il sera possible d'utiliser Visual Web Developer, qui fait 
partie de la gamme de produits Microsoft Express Edition et correspond a la version 
gratuite de Visual Studio. 

Par ailleurs, vous devez egalement installer Microsoft Silverlight Tools Beta 2 pour 
Visual Studio 2008, disponible a l'adresse suivante : http://www.microsoft.com/downloads 
(effectuez une recherche sur Silverlight). Telechargez et installez la version francaise (il 
s'agit d'un fichier nomme sil verl ight_chainer.exe). 

Loutil graphique Expression Blend est le compagnon (pour les graphistes) de Visual 
Studio. Vous le trouverez sur le site http://www.silverlight.net/GetStarted. A la meme 
adresse, vous trouverez Deep Zoom Composer, que nous utiliserons (voir la section 
« Deep Zoom » du chapitre 7). 

Meme si vous etes programmeur, cela vaut la peine d'installer au moins les deux premiers 
outils suivants (meme en version d'evaluation) de la gamme Microsoft Expression 
(http://www.mi cros oft .com/ Express ion/) : 

• Expression Design pour preparer des dessins professionnels ; 

• Expression Media Encoder pour la video ; 

• eventuellement, Expression Web qui remplace FrontPage. 

Vous etes maintenant pret a ecrire une premiere application Silverlight deja tres complete. 
Tournez la page, cela se passe au chapitre 2. 
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Creation d'une 
application Silverlight 



Description de l application 

Au cours de ce chapitre, nous allons creer une application Silverlight qui : 

• realise plusieurs animations, a savoir un texte deroulant et un carrousel ; 

• permet de tourner les pages d'un catalogue touristique au moyen de la souris ; 

• diffuse en permanence une video au centre de la fenetre ; 

• recherche des images sur le site Flickr (avec criteres de recherche specifies par l'utili- 
sateur) et les affiche sur un carrousel tournant. 

La figure 2-1 represente 1' application terminee et visualisee dans Firefox version 3. 



Figure 2-1 
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D'autres elements auraient pu etre ajoutes, tels que des animations Flash (voir la section 
« Animation Flash dans une page Silverlight » du chapitre 16), qui ont le merite d'etre 
largement repandues depuis des annees, ou encore la technologie Deep Zoom (voir la 
section « Deep Zoom » du chapitre 7) qui permet de zoomer sur des sujets de plus en 
plus precis. 

Demarrage du projet avec Visual Studio 

Pour realiser 1' application souhaitee, nous utiliserons la version francaise de Visual 
Studio 2008. A noter qu'avec la version finale de Silverlight, il sera possible d'utiliser 
Visual Web Developer (y compris en version francaise) qui est la version gratuite de 
Visual Studio. En attendant, vous pouvez telecharger et utiliser la version d' evaluation 
francaise de Visual Studio 2008 Pro (voir la section « Installation du logiciel » du 
chapitre 1). 

Pour commencer, vous allez devoir creer un nouveau projet dans Visual Studio en specifiant 
que vous utiliserez le C#. A noter, vous pourriez tout aussi bien utiliser Visual Basic 
(VB.NET). En effet, les deux langages presentent les memes possibilites et le choix de 
l'un ou de l'autre est affaire purement personnelle. Ceux qui ne seraient pas familiers 
avec l'un de ces deux langages, mais sans etre pour autant neophytes en programmation, 
trouveront dans 1' annexe tout ce qu'il faut savoir pour debuter la programmation 
Silverlight 2 dans Tun de ces deux langages. Dans la suite de l'ouvrage, les versions C# 
et VB seront toujours presentees conjointement. 

Pour creer le projet de 1' application, selectionnez le menu Fichier>Nouveau>Projet> 
Silverlight> Application Silverlight (onglet C# dans notre cas). Indiquez le repertoire 
dans lequel il sera enregistre dans le champ Empl acement et nommez le projet, ici, Notre- 
Appl i cation (figure 2-2). 

Visual Studio vous demande maintenant (figure 2-3) si vous creez une veritable application 
qui devrait etre deployee sur un serveur (proposition par defaut), ou un petit projet de test. 

Le deuxieme choix ne se justifie que s'il s'agit vraiment de creer une petite application de 
test. Vous gagnerez alors de la place sur le disque et un peu (si peu) de temps lors des 
compilations. 

Validez la proposition par defaut (premier choix), qui correspond a un cas pratique avec 
developpement d'une application et, eventuellement a la fin, deploiement de l'applica- 
tion sur un serveur Internet pour mise a disposition du public. De plus, cela vous en 
apprendra bien plus sur le fonctionnement d'une application Silverlight. 

En procedant ainsi, Visual Studio va creer deux repertoires (NotreAppli cation et Notre- 
Appl icationWeb) et deux projets dans la solution (une solution regroupe un ou plusieurs 
projets). Dans le repertoire NotreAppl icationWeb, seront enregistres les fichiers qu'il 
faudra copier sur le serveur (chez votre hebergeur si vous ne disposez pas de votre propre 
serveur Internet). 
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Figure 2-2 
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Figure 2-3 




Pour executer une application, celle-ci doit etre hebergee dans une page Web 
HTML. Comment voulez-vous heberger ['application Silverlight ? 

9 AJouter un nouveau site Web a la solution pour I'hebergement du controle 

Generer dynamiguement une page de test HTML pour heberger Silverlight dans ce pre 

(j Lier ce controle Silverlight a un site Web existant 
Options 

Type de projet : | Web Site 

Nom : 



NotreApplcationWeb 
| Copier dans des dossiers dependant de la configuration 



OK 



Annuler 



12 



Silverlight 2 



Cote hebergeur, aucun traitement special n'est a demander. Peu importe que le serve ur 
d'acces a Internet tourne sous IIS (solution Microsoft) ou Apache (solution Linux). Si 
vos simples pages HTML sont acceptees, vos pages Silverlight le seront aussi. 

La figure 2-4 represente l'Explorateur de solutions de Visual Studio tel qu'il apparait apres 
la generation des squelettes de fichiers de 1' application (ces fichiers seront completes 
durant la phase de developpement de 1' application Silverlight). 
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Les fichiers de ('application 

Durant le developpement de 1' application, vous travaillerez essentiellement dans le projet 
NotreAppl i cation, done dans la partie Silverlight. Une fois 1' application terminee, le deploie- 
ment (sur le serveur) se fera a partir des fichiers contenus dans NotreAppl 1 cati onWeb, done 
dans la partie Web du projet. Apres compilation, des fichiers seront automatiquement 
copies et mis a jour dans la partie Web du projet. 

Les deux fichiers avec lesquels vous travaillerez le plus au cours du developpement sont 
Page.xaml et Page.xaml .cs, mais examinons au prealable le contenu des differents fichiers 
generes par Visual Studio. 

Visual Studio a cree dans le projet NotreAppl i cati onWeb deux fichiers nommes par defaut 
NotreApplicationTestPage.html et NotreAppl i cati onTestPage.aspx. Pour renommer ces fichiers 
a votre guise, cliquez droit sur l'un des noms et choisissez Renommer. 

Les fichiers NotreApplicationTestPage.html et NotreAppl i cati onTestPage.aspx correspon- 
dent a des deploiements differents. Pour un deploiement ASP.NET (avec fichier . aspx), le 
serveur doit etre sous controle dTIS (Internet Information Server de Microsoft). ASP.NET 
est tres utilise depuis quelques annees pour des solutions dites de programmation serveur par 
les entreprises. Un deploiement HTML convenant parfaitement aux applications Silverlight, 
nous lui donnerons la preference en raison de la plus grande facilite de deploiement qu'il 
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permet (un deploiement HTML est possible sur tous les types de serveurs, ce qui n'est 
pas le cas pour un deploiement ASP.NET). 

Le fichier Page.xaml genere par Visual Studio contient la description de la page Web 
Silverlight. XAML (pour extensible Application Markup Language) est le « langage » 
de description de pages executees sous controle du run-time Silverlight. II s'agit d'un 
formalisme XML avec des noms de balises et d'attributs bien particuliers. En general, les 
programmeurs preferent manipuler directement les balises XAML dans Visual Studio, alors 
que les graphistes preferent passer sous Expression Blend, l'outil graphique modifiant ou 
generant ces balises XAML. Les deux logiciels sont concus pour un travail en collabora- 
tion : toute modification effectuee dans l'un est automatiquement detectee et prise en 
compte par 1' autre. Dans ce chapitre, nous donnerons la preference a la premiere possibi- 
lite (XAML sous Visual Studio) car vous en apprendrez ainsi bien plus. Tout program- 
meur Silverlight se doit de maitriser le XAML (ce qui n'a vraiment rien de complique) 
meme s'il lui arrive de passer a Expression Blend pour des operations plus compliquees. 

Au demarrage du developpement d'une application, le fichier Page.xaml contient le code 
suivant : 

<UserControl x:Cl ass="NotreAppl i cat ion. Page" 

xmlns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Width="400" Height="300"> 
<Grid x:Name="LayoutRoot" Background="White"> 

</Grid> 
</UserControl> 

Par defaut, Visual Studio, en generant ces balises, limite la page a un rectangle de 
400 x 300 pixels. Supprimez les attributs Width et Height pour que la page Silverlight 
occupe toute la fenetre du navigateur. Visual Studio a aussi cree une grille comme conte- 
neur de la page Silverlight. Les composants (images, boutons, grilles de donnees, anima- 
tions, etc.) seront inseres dans cette grille, ici avec un fond blanc (attribut Background). 
Les conteneurs et en particulier la grille, avec ses nombreuses possibilites, seront etudies 
au chapitre 3. 

Visual Studio genere egalement (dans les fichiers Page.xaml .cs ou Page.xaml .vb selon le 
langage retenu) un embryon de code avec les usi ng (Imports en VB) les plus frequemment 
utilises. II mentionne 1 1 espaces de noms (il s'agit de noms donnes a des regroupements de 
classes). C'est dans ce fichier (qui sera complete au fur et a mesure) que vous indiquerez le 
code a executer quand, par exemple, l'utilisateur clique sur un bouton. Pour le moment, 
il ne contient que le constructeur de la classe Page, qui est la classe de la page Silverlight. 

using System; 

using System. Col lections. Generic; 

using System. Linq; 

using System. Net; 

using System. Windows; 

using System. Windows. Controls; 
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using System. Windows. Documents; 

using System. Windows. Input; 

using System. Windows. Media; 

using System. Wi ndows . Medi a . Ani mati on ; 

using System. Windows. Shapes; 

namespace NotreApplication 

{ 

public partial class Page : UserControl 
{ 

public PageO 
{ 

Initial izeComponent( ) ; 



Ceux qui ont deja pratique la programmation .NET pour le developpement a" applica- 
tions Windows se retrouvent en terrain connu avec les memes langages, les memes outils 
et quasiment les memes classes. Quant aux autres, nul doute qu'ils « entreront » avec une 
facilite deconcertante dans Visual Studio. 

On peut deja tester cette application, meme si elle n'affiche encore qu'une page vierge. 
Pour lancer 1' application, plusieurs techniques sont possibles : 

• par le menu Deboguer>Demarrer le debogage, appuyer sur la touche F5 ou encore 
cliquer sur le petit triangle vert avec pointe vers la droite dans la barre des boutons ; 

• par le menu Deboguer>Executer sans debogage pour une execution sans controle du 
debogueur ; 

• par l'Explorateur de solutions, cliquez droit sur le fichier . html ou . aspx puis sur Afhcher 
dans le navigateur ou Naviguer avec... pour faire apparaitre un autre navigateur que 
celui par defaut. 

Lors de 1' execution par la touche F5 (en mode debogage, avec possibilite de placer des 
points d' arret), vous devez confirmer lors de la toute premiere execution que le debogage 
de 1' application est autorise (ce qui necessite une modification du fichier de configuration 
Web . conf i g, figure 2-5). 



Lo pogc nc pcut pas ctrc cxccutcc cn mode debogage, car le debogage n est pas activi dans 
le fichier Web.config. Que voulez-vous faire ? 

• Modifier le fichier Web.config pour activer le debogage. 



Figure 2-5 
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Vous obtenez alors une page Web vierge, ce qui est normal puisque aucun code n'a encore 
ete saisi (figure 2-6). 

Figure 2-6 
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Cette execution a necessite la compilation du programme. Un repertoire CI ientBin a ete 
cree dans la partie Web du projet, lequel contient un fichier d' extension .xap (figure 2-7). 
Ce fichier renferme le code binaire de 1' application : il s'agit duresultat de la compilation 
de 1' application (par le compilateur C# ou VB) en ce code binaire qu'on appelle CIL 
{Common Intermediate Language), code qui est independant de la plate-forme d' execution 
de la page Web (Windows, Mac ou Linux). 



Figure 2-7 
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Une application Silverlight 2 est done bien compilee et ce code est execute chez le client 
par le run-time Silverlight. Comme nous l'avons vu au chapitre 1, 1' application detecte 
au demarrage si le run-time Silverlight est present. Dans le cas contraire, elle propose a 
l'utilisateur de l'installer, ce qui prend moins d'une minute et ne reclame aucun droit 
d' administration de la machine. 

Nous verrons bientot par quel mecanisme le fichier XAP est appele par le navigateur et 
execute sous controle du run-time Silverlight. A noter que le navigateur ne connait pour- 
tant que le HTML et le JavaScript et n'a pas ete modifie pour Silverlight. Nous verrons 
egalement a cette occasion que le fichier XAP est en fait un fichier ZIP et qu'il contient, 
sous forme compressee, differents elements. 



Deploiements ASP.NET et HTML 

Passons maintenant a l'examen des fichiers .aspx et .html. Par defaut, Visual Studio 
donne la priorite au deploiement ASP.NET, la solution Microsoft de programmation Web 
cote serveur. Pour modifier ce comportement, cliquez droit sur le nom du fichier HTML 
(dans la partie Web du projet) et selectionnez Definir comme page de demarrage 
(figure 2-8). 



Figure 2-8 
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Lors d'une execution par la touche F5, c'est desormais le fichier HTML qui est pris en 
compte par le navigateur. En cours de developpement, cette modification n'a d' impor- 
tance que si vous modifiez un fichier (.html ou .aspx) sans effectuer la meme modification 
dans l'autre. Pour le deploiement, c'est l'un ou l'autre fichier qu'il faudra copier sur le 
serveur Internet. Modifier les fichiers .html ou .aspx n'est vraiment necessaire que dans 
des cas particuliers, qui seront presentes au chapitre 16. 

Analysons maintenant le fichier .aspx genere par Visual Studio (fichier qu'il faudra copier 
sur le serveur, avec le contenu du repertoire CI i entBi n, en cas de deploiement ASP.NET) : 

<%@ Page Language="C#" AutoEventWi reup="true" %> 
<%@ Register Assembly="System. Web. Silverlight" 

Namespace=" System. Web. Ill .Sil verl ightControl s" 
TagPref ix="asp" %> 
<!D0CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" 

"http://www.w3.org/TR/xhtml 1/DTD/xhtml 1-transitional .dtd"> 
<html xmlns="http://www. w3.org/1999/xhtml " style="height:100%;"> 
<head runat="server"> 

<title>Test Page For NotreApplication</title> 
</head> 

<body style=" height :100%;margin:0;"> 
<form id="forml" runat="server" style="height:100&;"> 
<asp:ScriptManager ID="ScriptManagerl" runat=" server "X/asp:ScriptManager> 
<div style="height:100£;"> 
<asp:Silverlight ID="Xamll" runat="server" 

Source="~/Cl i entBi n/NotreAppl i cati on .xap" 
MinimumVersion="2. 0.30523" Width="100%" Height="100%" /> 

</div> 
</form> 
</body> 
</html> 

Tout se passe dans la balise <asp : Sil verl ight> qui correspond a un composant ecrit par 
Microsoft dans le cadre d' ASP.NET/Ajax/Silverlight. Facile a utiliser (une seule balise et 
quelques attributs seulement pour passer sous controle de Silverlight) mais malheureusement, 
cela nous cache le mecanisme de fonctionnement. 

Analysons plutot le fichier HTML qui nous en apprendra bien plus. Le HTML, tout a fait 
standard (rappelons que les navigateurs n'ont pas du etre modifies pour Silverlight), 
comprend une balise object, largement utilisee depuis des annees. Cette balise a ete concue 
a l'origine pour charger « quelque chose » dans le navigateur et demander a du code ainsi 
telecharge d'assurer l'affichage de ce « quelque chose » (il s'agissait surtout de permettre 
la diffusion video dans une page Web). Dans notre cas (voir la balise pa ram avec source), 
« quelque chose » doit etre telecharge depuis CI i entBi n/NotreAppl i cat ion. xap (cet empla- 
cement etant relatif a celui du fichier HTML). 

En toute logique, le fichier HTML est appele en premier par le navigateur (c'est en effet 
ce fichier qui est mentionne dans l'URL saisie par l'utilisateur). Des sa reception, ce 
fichier (de texte) est analyse ligne par ligne par le navigateur. Lorsque celui-ci arrive a la 
balise object, il appelle le fichier NotreAppl ication.xap du repertoire CI i entBi n : 
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<body> 



<di v id="sil verl ightControl Host"> 

<object data="data:application/x- silverlight." 

type="application/x-silverlight-2-b2" width="100%" height="100%"> 
<param name="source" val ue="Cl ientBin/NotreAppl i cation. xap"/> 

<param name="onerror" val ue="onSi 1 verl ightError" /> 

<param name="background" val ue="white" /> 

<a href ="http: //go. mi crosoft.com/fwl ink/? Li nkID=115261" 

styl e=" text-decoration: none; "> 
<img src=" http://go.mi crosoft.com/fwl ink/?LinkId=108181" 

alt="Get Microsoft Silverlight" style="border-style: none"/> 

</a> 
</object> 

<i frame styl e= ' vi si bi 1 i ty : hidden; height :0;width:0 ; border :Opx'X/iframe> 
</div> 
</body> 

A ce stade du developpement de 1' application, la taille du fichierXAP est de 4 Ko 
(figure 2-9). 

Figure 2-9 

• |. AppliratinnSilvprlight 
» t NotreApphcation 
' i NotreApplicationWeb 

, App.Ddld 

•■■ It Bin Nom Date de modificatL. Type Taille t 

ClicntBin NotreApplication.xap 9/06/200814:30 HchierXAP 4 Ko 

Nous verrons par la suite que la taille de ce fichier augmentera au fur et a mesure du 
developpement de 1' application tout en restant etonnamment faible. Ceci vient du fait 
que ce fichier contient le code compile de 1' application sous forme compressee. Celui-ci 
est execute directement chez le client, sans passer par une interpretation peu efficace, 
comme c'est le cas avec JavaScript. 

Puisque nous en sommes a V analyse des fichiers . html et . aspx, profitons-en pour modifier 
le titre de 1' application (balise title dans la section head) : 

<title>L)ne application Silverlight</title> 



Insertion de I'image de fond 

Apres ces considerations generates mais indispensables, vous allez desormais pouvoir 
creer veritablement 1' application. 

Pour cela, interessons-nous au plus important des fichiers, a savoir Page.xaml. Ouvrez-le en 
double -cliquant dessus dans l'Explorateur de solutions. Du fait de la suppression precedente 
des balises Wi dth et Hei ght dans la balise UserControl , le conteneur de l'application Silverlight 
est une grille qui s'adapte en permanence a la fenetre du navigateur. 
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<UserControl x:Cl ass="NotreAppl i cat ion. Page" 

xmlns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 

> 

<Grid x:N«me="LayoutRoot" Background="White"> 
</Grid> 

</UserControl> 

Ajoutons a present une image (ici, le logo Silverlight) en fond de grille. Pour cela, vous devez 
charger 1' image dans le projet (partie Silverlight) pour qu'elle soit integree en ressource de 
F application (F image de fond devra toujours etre transmise au navigateur) : cliquez droit sur 
le nom du projet (partie Silverlight) et selectionnez Ajouter>Element existant (figure 2-10). 



Figure 2-10 ^ N otre Appii cat j on TestPage.htrril 

_> web.config 
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Ncttoycr 

Afficher dans le navigateur 
Dependances du projet.. 
Oldie (Je [ d ti enfrrtdlion du piujel... 
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Aiouicr unc reference... 
Ajouter une reference de service... 




Afficher le diagramme de classes 
Definir comme projet de demarrage 





M 


Nouvel element-. 


Flertieril exist hi il"*"^^ 




Nouveau dossier 




Classe... 



Recherchez ensuite 1' image dans le systeme de fichiers. Elle est copiee dans le repertoire 
du projet (partie Silverlight) et apparait dans le projet (figure 2-11) : 



Figure 2-11 
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Pour le moment, le fond de la grille est blanc mais il va etre remplace par l'image. Pour cela, 
supprimez l'attribut Background et remplacez-le par une balise Background (de grille) plus 
complexe. II s'agit d'une balise XAML. 

Nul besoin de passer des heures a assimiler la syntaxe des balises XAML, l'aide contex- 
tuelle de Visual Studio rend les choses tres intuitives (figure 2-12). 



Figure 2-12 



J a Design/ M / a XAML | 

□ <UserControl x : Class="NotreApplication . Page" 

xmln3=" http : 7/schemas .microsoft . com/winf x/2006/xaml/presentation " 

xmlns : x=" http : //schemas .microsoft . com/winf x/2006/xaml " 

> 

n <Grid x:Name= n LayoutRoot" Background="White"> 
Fl<Grid. 



</U 



Background 



m Children 

82 Clip 

m Column 

>M> ColumnDefinitions 
™ ColumnSpan 

Cursor 
m DataContext 

83 Height 
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Dans la balise Grid. Background, specifiez un pinceau base sur une image (les pinceaux 
seront etudies au chapitre 4) : 

<Grid x:Name="LayoutRoot" > 
<Grid.Background> 
<ImageBrush ImageSource="Si 1 verl ightl_ogo.jpg" /> 
</Grid.Background> 

</Grid> 

L' application n'a pas encore ete compilee mais deja Visual Studio nous signale une 
anomalie par un trait ondule sous Grid. Background (figure 2-13). Cette erreur est due au 
fait que l'attribut Background n'a pas ete supprime alors qu'une sous-balise Grid. Background 
a ete ajoutee. Supprimez l'attribut. Vous constatez alors que 1' anomalie a disparu. 

Une image est maintenant affichee en fond de grille mais elle est deformee (elle est, par 
exemple, aplatie) quand les dimensions de la grille (done la fenetre du navigateur) ne 
correspondent pas (en proportions) a celles de l'image. Pour resoudre ce probleme, ajou- 
tez l'attribut Stretch avec sa valeur Uniform (figure 2-13). Nous reviendrons sur cet attri- 
but au chapitre 7). 



Creation d'une application Silverlight 

Chapitre 2 



Figure 2-13 



Q Design / tt /'bxAML 



□ <UserControl x : Class="NotreApplication . Page" 

xmlns=" http: //schemas .microsoft . com/winfx/2006/xaml/presentation " 
xmlns : x=" http: / / schemas .microsoft . com/winf x/2006/xaml " 
> 

[j] <Grid x:Name="LayoutRoot" Background="White n > 
h <(jr.ici.ftaPkqround> 

g <Iniay eBL ush Im<iyeSource="Silvc;rliyhLLoyo. jpy" SLreLcl i="" 

</Crid> 
</UserControl> 



Fill 
juf None 
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Executez maintenant 1' application (ce qui va impliquer une compilation) avec un autre 
navigateur que celui par defaut. Pour cela, cliquez droit sur le fichier . html dans l'Explo- 
rateur de solutions (partie Web), choisissez Naviguer avec. . . (figure 2-14) et selectionnez 
Firefox dans la liste des navigateurs disponibles (c'est a vous de creer cette liste et de 
definir le navigateur par defaut). 



Figure 2-14 



NotrcApplicotionTcstPogcty 



M NotreApplicationTestPage.aspx 

a - 

& web.config 
<]3 NotreApplication 
[± Properties 
i* -=j References 



* App.xaml 
$ ' Pagejcaml 

Jl SilverlightLogo.jpg 



Ouvrir 

Ouvrir avec... 



Loncepteur de vues 
Afficher le balisage 



*1 Afficher dans le navigateur 
^^Naviguer avec.^J^ 

Definir comme page de demarrage 
Verification de I'accessibilite... 



Exclure du projet 



Couper 
Copier 
Supprimer 
Renommer 



La figure 2-15 montre le resultat obtenu dans Firefox. 

Quelle que soit la taille de la fenetre du navigateur, l'image de fond est affichee a sa plus 
grande taille possible mais toujours en respectant ses proportions. Ainsi, elle n'est jamais 
deformee. 
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Figure 2-15 
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Transfert des donnees depuis localhost... 



A ce stade, le fichier XAP (qui est un fichier compresse contenant le code binaire de 
l'application et desonnais l'image incorporee en ressource) atteint 17 Ko. 



Insertion de la video 

Nous allons a present jouer un clip video (le clip Silverlight de Microsoft) au milieu de la 
grille, qui se confond avec la fenetre du navigateur. Pour cela, ajoutez la balise Medi a El ement 
et indiquez (attribut AutoPl ay) qu'elle doit etre jouee automatiquement et des que possible 
(le temps qu'un premier buffer soit rempli afin d'assurer par la suite une diffusion fluide 
du film). Le fichier de la video, ClipSilverlight.wmv doit etre copie dans le repertoire 
ClientBin (celui du fichier XAP). Ceci s'effectue, par exemple, par un glisser-deposer 
depuis l'Explorateur de fichiers sur la ligne ClientBin de l'Explorateur de solutions, 
partie Web du projet (figure 2-16). 

Inserez maintenant la balise Medi aEl ement (voir chapitre 7) qui permet de lire de la musique 
ou des videos. Comme precedemment, vous pouvez proceder par glisser-deposer depuis 
la barre d' outils de Visual Studio vers un emplacement precis (le point de cliquage) dans 
le fichier Page.xaml. Specifiez le nom du fichier video (attribut Source) ainsi que la taille 
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Figure 2-16 
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du rectangle de diffusion (attributs Width et Height). Attribuez egalement un nom (attribut 
x: Name) au composant, ce qui n'est pas encore indispensable a ce stade mais le deviendra 
bientot : 

<Grid x:Name="LayoutRoot"> 
<Grid.Background> 

<ImageBrush ImageSource="Silverlightl_ogo.jpg" Stretch="Uniforin" /> 
</Grid.Background> 

<MediaElement x:Name="video" AutoPl ay="True" Source="ClipSilverlight.wmv" 
Width="320" Height="340" /> 

</Grid> 

Dans la mesure ou les attributs Horizontal Alignment et Vertical Al ignment n'ont pas ete 
specifies (voir chapitre 3), Center est la valeur par defaut pour ces deux attributs. La video 
sera done toujours centree dans la page du navigate ur. 

La figure 2-17 illustre le resultat obtenu dans Safari, avec l'image de fond et la video. 

La video est maintenant jouee au demarrage (et a chaque rechargement de la page) mais 
elle ne Test qu'une seule fois. II faudra done detecter la fin de la video et, au moyen d'un 
programme, la relancer depuis le debut. Pour cela, il convient de specifier l'evenement 
Medi aEnded qui signale la fin de la video. II suffit de placer le curseur dans la balise Medi aE- 
lement et d'appuyer sur la barre d'espace pour que Visual Studio affiche la liste des 
actions possibles (figure 2-18). II s'agit de tous les attributs et evenements applicables a 
un MediaElement, accompagnes d'une courte explication dans une info-bulle bien que les 
noms des attributs soient en general suffisamment explicites. 

Selectionnez l'attribut Medi a Ended correspondant a un evenement et demandez a Visual 
Studio de generer automatiquement la fonction de traitement {event handler en anglais). 
Pour cela, saisissez simplement le signe = a droite du nom de l'evenement (figure 2-19). 
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Figure 2-18 
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Figure 2-19 

<Grid x:Name-"LayoutKoot" > 
<Grid . Backgrounds 
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Confirmez ensuite la creation de la fonction de traitement au moyen de la touche Tab (il 
s'agit ici d'une nouvelle fonction de traitement a creer mais on pouiTait faire reference a 
une fonction existante qui traiterait un meme evenement pour plusieurs composants). La 
balise devient alors : 

<MediaElement x:Name="video" MediaEnded="video_MediaEnded" AutoPl ay="True" 
Source="ClipSilverlight.wmv" Width="320" Height="340" /> 

tandis que la fonction automatiquement generee pour traiter 1' evenement est (dans le 
fichier Page.xaml .cs) : 

private void video_MediaEnded(object sender, RoutedEventArgs e) 

{ 

} 

Le nom de la fonction de traitement est construit selon le schema suivant : nom interne de 
l'element (attribut x: Name), suivi du caractere de soulignement puis du nom de l'evenement. 

Dans cette fonction, repositionnez la video a 0 seconde et jouez-la avec PI ay. Comme 
son nom l'indique, la classe TimeSpan (litteralement « etendue de temps ») permet de 
specifier une duree. II s'agit d'une classe que Ton retrouve telle quelle (comme la plupart 
des classes d'ailleurs) en programmation .NET pour Windows ou ASP.NET. Nous avons 
ici repris la forme la plus simple (ce qui est possible car il s'agit du debut de la video) 
mais on aurait pu construire une duree exprimee en jours, heures, minutes, secondes et 
millisecondes : new TimeSpan( j j , hh, mm, ss, milli). 

Avec ce petit ajout de deux lignes, la fonction de traitement devient : 

private void video_MediaEnded(object sender, RoutedEventArgs e) 

{ 

video. Position = new TimeSpan(O) ; 
video. Play( ) ; 

} 

En VB, le XAML est identique et la fonction precedente s'ecrit (elle est tout aussi auto- 
matiquement generee par Visual Studio) : 

Private Sub video_MediaEnded(ByVal sender As Object, _ 

ByVal e As RoutedEventArgs) 

video. Position = New TimeSpan(O) 

video. PI ay ( ) 
End Sub 

Passer d'un langage a 1' autre ne presente vraiment aucune difficulte. 

Le travail en couches transparentes 

Nous allons maintenant nous occuper des animations. Bien que cela ne soit pas strictement 
necessaire ici (mais cela nous simplifiera les choses tout en nous permettant de presenter 
cette interessante fonctionnalite), nous allons ajouter deux couches transparentes a la grille 
et realiser une animation sur chacune d'elles, sans toucher a la grille de fond (LayoutRoot) : 
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<Grid x:Name="LayoutRoot" > 
<Grid. Background 

<ImageBrush ImageSource="SilverlightLogo.jpg" Stretch="Uniform" /> 
</Grid. Background 

<MediaElement x:Name="video" MediaEnded="video_MediaEnded" AutoPl ay="True" 
Source="ClipSilverlight.wmv" Width="320" Height="340" /> 

<Grid x:Name="GrImagesAnimees" Background="Transpirent" > 
</Grid> 

<Grid x:Name="GrLogoAnime" Background="Transparent" > 

</Grid> 

</Grid> 

Pour commencer, nommez (attribut x:Name) chacune des deux grilles transparentes. A ce 
stade, il s'agit avant tout de les nommer pour les identifier aisement mais les noms 
donnes aux composants sont aussi importants et jouent le meme role que les noms 
donnes aux variables. 

Comme aucune taille n'est specifiee (ni aucun emplacement relatif), ces deux grilles 
transparentes se superposent a la grille de fond. 

Premiere animation : le texte deroulant 

Dans la seconde grille transparente (GrLogoAnime), ajoutez un texte en rouge et d'une taille 
de 60 pixels (figure 2-20) : 

<Grid x:Name="GrLogoAnime" Background="Transparent" > 
<TextBlock Text="BIENVENUE CHEZ LES PROGRAMMEURS SILVERLIGHT 2" 
FontSize="60" Foreground="Red" /> 

</Grid> 



Figure 2-20 
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Le resultat est assez banal... Nous allons done telecharger sur Internet une police de 
caracteres (voir la section « Les polices de caracteres » du chapitre 5) plus attrayante. Le 
site http://www.coolgrafik.com propose le fichier Diskoteq.ttf qui contient la police 
Diskoteque. Comment savoir que Diskoteq.ttf contient la police Diskoteque ? Dans 
l'Explorateur de fichiers, il sufht de double-cliquer sur le nom d'un fichier . ttf pour afheher 
les noms des polices de caracteres qu'il contient. 

Telechargez ce fichier puis chargez-le dans le projet tout comme vous l'avez fait pour 
T image de fond : cliquez droit sur le nom du projet (partie Silverlight), choisissez Ajou- 
ter>Element existant et recherchez le fichier dans le systeme de fichiers. Vous devez 
ensuite indiquer que ce fichier doit etre incorpore en ressource. Pour cela, cliquez droit 
sur le nom du fichier .ttf dans l'Explorateur de solutions, choisissez Proprietes et selec- 
tionnez la valeur Resource dans le champ Action de generation (figure 2-21). 

Figure 2-21 
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Procedez ensuite a un petit changement dans l'attribut FontFami ly (nom de police) 

<TextBlock Text="Bienvenue chez les programmeurs Silverlight 2" FontSize="60" 
FontFamily="Diskoteq.ttf#Diskoteque" Foreground="Red" /> 

afin d'obtenir le resultat de la figure 2-22. 

Figure 2-22 
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La taille du fichier XAP (qui incorpore maintenant la police) est desormais de 34,8 Ko. 
Comme nous l'avons deja mentionne, un fichier XAP est en fait un fichier compresse au 
format ZIP. En l'analysant (il suffit de le renommer en .zip), on constate qu'il contient 
deuxfichiers : AppManifest.xaml et NotreAppl i cation. dl 1 . Le premier donne des informations 
sur ce qui est transmis au navigateur du client (a l'exception de la page HTML). Le second 
contient quant a lui le code binaire (resultat d'une compilation) de 1' application ainsi que 
les ressources (dans notre cas et jusqu'a present, une image et une police de caracteres). 

Pour notre application, nous decidons de faire defiler le texte en permanence de droite a 
gauche, comme s'il entrait par la droite et sortait par la gauche de la fenetre du navigateur. 
Une animation sera necessaire pour cela, ce que nous etudierons au chapitre 9. 

Pour le moment, placez le texte (balise TextBlock) dans un canevas (qui est un type de 
conteneur, voir chapitre 3), lui-meme insere dans la grille. Specifiez une marge de 10 pixels 
par rapport au bord superieur ann d'aerer la presentation. Dans le canevas, animez la 
coordonnee Left (le long de l'axe horizontal) du texte que vous venez de creer. Cette 
coordonnee va passer d'un deplacement de 1 400 a —1 400 en 10 secondes et 1' animation 
se repetera sans cesse (attribut RepeatBehavior). II serait possible d'optimiser les valeurs 
1 400 et — 1 400 en tenant compte de la taille reelle du texte mais cela n'a pas d'importance a 
ce stade de l'etude. 

Pour realiser 1' animation, il convient de placer ce que Ton appelle un storyboard dans le 
jargon Silverlight en ressource de son conteneur (ici, un canevas). II faut egalement attri- 
buer un nom (attribut x:Name) a l'animation (ici, animLogo) ainsi qu'au composant Text- 
Block (ici, zaLogo). Ce composant devra par ailleurs etre deplace dans la balise Canvas, 
juste avant la balise de fermeture. Pour plus de details sur les animations et les transfor- 
mations, reportez-vous au chapitre 9. 

<Grid x:Name="GrLogoAnime" Background="Transparent" > 
<Canvas Margin="0, 10, 0, 0" > 
<Canvas . Resources> 
<Storyboard x: Name="animLogo" RepeatBehavior="Forever" > 
<Doubl eAnimation Story boa rd.TargetName="za Logo" 

Story boa rd.TargetProperty="( Canvas . Left) " 
From="1400" To="-1400" Duration="0:0:10" /> 

</Storyboard> 

</Canvas . Resources> 

<TextBlock x:Name="zaLogo" 

Text="Bienvenue chez les programmers Silverlight 2" FontSize="60" 
FontFamily="Diskoteq.ttf#Diskoteque" Foreground="Red" /> 

</Canvas> 
</Grid> 

L'animation porte sur la propriete Canvas. Left de l'element zaLogo, ce qui est specifie 
dans les attributs Storyboard. TargetProperty et Storyboard. TargetName. Du fait que 
Canvas. Left designe une propriete dite attachee (voir la section « Les rectangles et les 
ellipses » du chapitre 5), les parentheses sont necessaires. 
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Dans la mesure oil il s'agit ici d'animer la propriete Canvas . Left qui contient une valeur 
numerique de type double (type privilegie par Silverlight pour les valeurs numeriques), 
nous avons affaire a une animation de type DoubleAnimation (d'autres types d'animations 
seront etudies a la section « Les animations » du chapitre 9). La duree d'un passage (de 
droite a gauche dans la fenetre) est specifiee dans l'attribut Duration et correspond ici a 
0 heure, 0 minute et 10 secondes. La duree d'une animation peut aussi etre exprimee en 
millisecondes mais cela n'aurait pas de sens ici. 

Lanimation sera lancee au demarrage de 1' application. Levenement Loaded adresse a la 
grille (voir chapitre 6) signale ce moment. Cet evenement est plus precisement signale 
juste apres le travail de preparation de la page en memoire et juste avant le tout premier 
affichage dans la fenetre du navigateur. Ici aussi, nous demandons a Visual Studio de 
generer la fonction de traitement. Comme nous 1' avons vu precedemment, il suffit de 
taper Loaded^ pour que Visual Studio enclenche le processus de creation de la fonction de 
traitement (figure 2-23). 

Figure 2-23 
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<MediaElement x:Name=°video" MediaEnded="video_MediaEnded'' AutoPlaj 



La balise devient alors : 

<Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded"> 

et une nouvelle fonction de traitement (de l'evenement Loaded adresse a la grille LayoutRoot) 
est generee dans le fichier Page.xaml .cs. II convient a present de la completer. Comme 
Tanimation s'appelle animLogo (attribut x:Name du storyboard, figure 2-24), la fonction 
Begin appliquee a 1' animation la fait demarrer : 

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) 

{ 

animLogo. Begin( ) ; 

} 



Figure 2-24 

private void LayoutRoot_Loaded (object sender, RoutedEventArgs e) 
[ 

animLogo . 



3 1 AutoReverse 


> 




V 


Begin 




void Storyboard.BeginO 

Initiates the set of animations associated with this Syst€ 


=■ BcginTimc 
^ Children 
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Les figures 2-25 et 2-26 presenters le resultat de cette animation dans Safari a deux 
moments differents. 



Figure 2-25 
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'> hup //local host 49428/NotreApplical ronWeWNotreApplicationTestPage.html 




Zone d'edition et bouton dans Silverlight 

Au bas de la fenetre, il convient a present de placer le libelle (Critere Fl ickr :), la zone 
d'edition (dans laquelle l'utilisateur saisira le critere de recherche) ainsi que le bouton 
permettant de lancer une recherche d'images sur le site Flickr. Ces trois elements corres- 
pondent respectivement aux composants TextBl ock, TextBox et Button qui font partie, avec 
beaucoup d'autres, de la panoplie des composants Silverlight. lis devront etre accoles au 
bord inferieur de la fenetre au moyen de l'attribut Vertical Al ignment pour lequel la valeur 
Bottom sera specifiee, tout en prenant soin de definir une marge de maniere a aerer la 
presentation. Ainsi, meme si l'utilisateur redimensionne la fenetre, ces trois elements seront 
toujours affiches au bas de la fenetre. 

Pour cela, ajoutez ce qui suit a l'interieur de la balise Grid pour GrLogoAnime (juste avant 
la balise de fermeture </Grid>) : 

<TextBlock Text="Critere Flickr :" HorizontalAlignment="Left" 
VerticalAl ignment="Bottom" Margin="10, 20" 
FontSize="25" Foreground="Red" FontFamily="Verdana" /> 
<TextBox x:Name="zeCritFlickr" Text ="Paris" HorizontalAl ignment="Left" 

VerticalAl ignment="Bottom" Margin="200, 25" Width="250" /> 
<Button x: Name="bFl i ckr" Content="Recherche Flickr" HorizontalAl ignment="Left" 
VerticalAl ignment="Bottom" Margin="500, 10" Width="100" Height="60" 
Click="bFlickr_Click" /> 



Creation d'une application Silverlight 

Chapitre 2 



Profitez-en pour demander a Visual Studio de generer la fonction de traitement du clic 
sur le bouton (evenement Click), fonction qui sera completee par la suite : 

private void bFl i ckr_Cl i ck( object sender, RoutedEventArgs e) 



La figure 2-27 illustre le resultat obtenu a ce stade. 



Figure 2-27 
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Image dans bouton 

Pour le moment, le libelle du bouton est un texte (Recherche Flickr), que nous allons 
remplacer par une image, a savoir le logo de Flickr. A l'aide du logiciel Microsoft Photo 
Editor, ou de tout autre logiciel proposant les memes fonctionnalites, rendez ce logo 
transparent en specifiant une couleur de transparence et creez le fichier Fl i ckr . png a partir 
du fichier .jpg. Incorporez ensuite cette image en ressource (Ajouter>Element existant 
dans l'Explorateur de solutions (partie Silverlight). Enfin, modifiez la balise Button 
(supprimez l'attribut Content et ajoutez une balise Button. Content), qui devient alors : 
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<Button x:Name="bFlickr" HorizontalAl ignment="Left" Vertical Al ignment="Bottom" 

Margin="500, 10" Width="100" Hei ght= "60 " Click="bFlickr_Click"> 
<Button.Content> 
<Image Source="Fl ickr.png" /> 
</Button.Content> 
</Button> 

La figure 2-28 represente le resultat obtenu, le logo Flickr etant maintenant affiche en 
transparence dans le bouton. 



Figure 2-28 
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La modification du bouton a ete ici tres simple. Au chapitre 15, nous verrons comment un 
graphiste (de preference. . .) peut, grace au logiciel Expression Blend, modifier et person- 
naliser n'importe quel sous-element de n'importe quel composant Silverlight (y compris 
les animations de transition d'etat telles que le passage a l'etat survol ou encore l'indication 
du clic) et cela, sans provoquer la moindre modification dans le travail du programmeur. 
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On tourne la page... 

Nous allons maintenant inserer un composant page turner dans la partie inferieure droite de 
1' application, composant qui restera accole au bord inferieur droit de la fenetre du navi- 
gateur, quelle que soit sa taille. L'utilisateur pourra ainsi tourner les pages d'un catalogue 
touristique, tout comme il le ferait avec un catalogue papier, mais en se servant bien 
evidemment ici de la souris. Pour cela, vous allez utiliser le composant decrit a la section 
« Tourner la page » du chapitre 7. 

Pour utiliser ce composant, l'application doit faire reference a (et integrer) la DLL SLMi t- 
suControl s . dl 1 (voir cette section « Tourner la page » au chapitre 7). Pour cela, selectionnez 
Ajouter une reference. . . (figure 2-29) dans l'Explorateur de solutions (partie Silverlight). 



Figure 2-29 
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Ajouter une reference. 
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Puis localisez (onglet Parcourir) la DLL SLMitsuControls.dll sur votre ordinateur 
(figure 2-30). 

Apres compilation, cette DLL sera greffee au fichier XAP, dont la taille augmentera alors 
de 34 Ko, ce qui est vraiment peu par rapport a ce qu'elle va nous permettre de faire. 

Comme cela sera explique au chapitre 14, le controle utilisateur inclus dans cette DLL 
doit etre specifie avec un prefixe, de maniere a le distinguer des composants integres au 
run-time Silverlight. Pour cela, il suffit d'ajouter la ligne de code suivante (en gras) dans 
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la balise UserControl du fichier Page.xaml (le prefixe est ici mf, d'apres les initiales de 
l'auteur du composant, a qui nous rendons hommage) : 

<UserControl x:Cl ass="NotreAppl i cation .Page" 

xmlns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xml ns :x="http: //schema s .microsoft.com/winfx/2006/xaml " 
xml ns:mf="cl r-namespace:SLMitsuControl s ;assembly=SLMitsuControls" 

> 



Figure 2-30 
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Types de fichiers : I'.dll 



OK 
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Dans la grille GrLogoAnime, ajoutez ce « tourneur de pages » et placez-le (avec une petite 
marge) dans le coin inferieur droit : 

<mf:UCBook x:Name="geo" HorizontalAlignment="Right" Vertical Al ignment="Bottom" 
Margin="20" Width="500" Height="220" /> 

Par ailleurs, les images du catalogue touristique doivent etre copiees dans le repertoire CI i ent- 
Bin (partie Web du projet). II suffit pour cela d'effectuer un copier-coller depuis l'Explo- 
rateur de fichiers jusqu' a l'entree CI ientBin dans l'Explorateur de solutions (figure 2-31). 

Les fichiers de ces images apparaissent alors dans l'Explorateur de solutions, partie Web 
(figure 2-32). 

En ressource dans la grille (celle du fond, LayoutRoot), indiquez les pages qui seront utilisees 
par le « tourneur de pages » : 

<Grid x:Name="LayoutRoot" Loaded="LayoutRoot_Loaded"> 
<Grid.Resources> 
<ItemsControl x:Name="pages" > 
<Image Source="Amsterdam. jpg" Stretch="Fill" /> 
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<Image Source="Venise. jpg" Stretch="Fill" /> 

<Image Source="Bruxelles.jpg" Stretch="Fill" /> 

<Image Source="Moscou. jpg" Stretch="Fill" /> 

<Image Source="Londres. jpg" Stretch="Fill" /> 
</ItemsControl> 
</Grid. Resources> 



Au chapitre 7, nous verrons qu'il pourrait s'agir de bien autre chose que de simples 
images. Des evenements peuvent etre traites, qui indiquent quand les pages sont tour- 
nees, quelles pages sont affichees (a gauche et a droite) et sur quelle page l'utilisateur a 
clique, vraisemblablement en vue d'obtenir de plus amples informations. 

A ce stade, le fichier Page.xaml .cs doit subir quelques modifications. En effet, il faut indi- 
quer que le compilateur doit tenir compte d'un nouvel espace de noms, que la classe Page 
doit implementer l'interface IDataProvider et qu'il faut pour cela implementer les fonc- 
tions GetCount et Get Item (c'est 1' implementation du composant « tourneur de pages » qui 
exige ces quelques lignes supplementaires). 



Figure 2-31 
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Figure 2-32 
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Dans la fonction qui traite l'evenement Loaded adresse a la grille principale (LayoutRoot), 
associez le composant « tourneur de pages » aux donnees qu'il doit afficher dans ses 
pages (ici, une serie d'images mentionnees dans la balise ItemsControl , avec pages comme 
nom interne). Les lignes de code a ajouter dans le fichier Page.xaml .cs sont indiquees 
ci-dessous : 

using SLMitsuControls; 



public partial class Page : UserControl, IDataProvider 



geo.SetData(this) ; 

} 

public object Getltemdnt index) 
{ 

return pages. Items[index] ; 

} 

public int GetCountO 
{ 

return pages. Items. Count; 

} 

Vous pouvez desormais lancer 1' application et « tourner les pages » (figure 2-33). 

Les figures 2-34 et 2-35 presentent le « tourneur de pages » en gros plan, lorsque l'utili- 
sateur tourne la page. 



{ 



private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) 
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Figure 2-33 
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Figure 2-34 

r 



38 



Silverlight 2 



Figure 2-35 




Acces au serveur d'images Flickr 

A la demande de I'utilisateur, c'est-a-dire lorsque celui-ci clique sur le bouton, l'application 
doit aller chercher des images sur le site Flickr et les afficher ensuite sur un carrousel 
tournant. Dans le cadre de cette application, nous nous limiterons a six photos par sujet 
(des milliers de photos sont parfois disponibles sur certains sujets). 

Pour realiser cette animation, il convient tout d'abord d' afficher l'anneau sur lequel tourne- 
ront les photos. Celui-ci est insere dans la premiere grille transparente (GrlmagesAnimees) : 

<Grid x:Name="GrImagesAnimees" Background="Transparent" > 
<Ellipse x:Name="rail" StrokeThickness="10" Stroke="Gray" 
Width="500" Height="500" /> 

</Grid> 

L'anneau est en fait une ellipse dont la largeur de trait est de 10 pixels. Comme les 
valeurs par defaut des attributs Horizontal Alignment et Vertical Alignment sont Center, 
l'anneau sera toujours centre dans la grille (figure 2-36). 

Pour obtenir des photos correspondant au critere specifie dans la zone d'edition, vous 
devez adresser une requete a Flickr (ceci sera explique au chapitre 13, ainsi que la 
procedure, tres simple, d'inscription a Flickr). Apres votre inscription sur le site Flickr, 
celui-ci vous communiquera un code utilisateur (a utiliser ici) ainsi qu'un mot de passe 
(non utilise ici car il sert a envoyer des photos au serveur ou donne acces a des photos a 
usage prive). Cette requete sera executee dans la fonction qui traite l'evenement CI ick 
du bouton. 
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Figure 2-36 
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La requete doit etre adressee a une URL appartenant a Flickr, en mentionnant un code 
d'acces ainsi que la chaine « critere de recherche ». II n'y a pas de veritable probleme a 
communiquer un code d'acces, sauf peut-etre un usage immodere et scabreux que certains 
pourraient en faire. 

private void bFl ickr_Cl ick(object sender, RoutedEventArgs e) 

{ 

string cle = "Icl313a40fo8dbo????2'11'11d90am i=; // code d'acces 
string url = "http://api.flickr.com/services/rest/" 

+ "?method=f 1 ickr .photos .sea rch&api_key=" 
+ cle + "&text=" + zeCritFl ickr. Text; 
WebClient client = new WebClientO; 



// ici, deux instructions, dont la requete 



) 



Flickr va lire la requete que vous lui avez envoyee et vous fournira en retour un nchier XML 
contenant des informations sur les photos repondant au critere (mais pas encore les photos 
elles-memes). 



Pour effectuer une telle requete sur le Web, Silverlight met a votre disposition l'objet 
WebClient. Dans la mesure ou cette requete peut durer un certain temps, l'operation est 
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effectuee de maniere asynchrone afin de ne pas bloquer 1' application Silverlight. L'objet 
WebCl ient signale l'evenement DownloadStringCompleted quand le fichier XML a ete recu. 

Cet evenement est bien stir repris dans l'aide contextuelle et il convient de signaler a 
Silverlight qu'il va etre traite (figure 2-37). 

Figure 2-37 

WebClient client = new WebClientO; 
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Comme il s'agit d'un evenement, saisissez += a droite du nom du nom de l'evenement 
(figure 2-38). 

Figure 2-38 

WebClient client new WebClientO; 
client .DownloddSLrinqCompltrttrd +■ 

new DownloadStringCompletedtvenlHandlerUlient.DoniiloidSlnngCompleted): (Appuyez sur TABULATION pour insererl| 

Visual Studio vous propose alors de completer 1' instruction et de generer la fonction de 
traitement (appuyez sur la touche Tab pour valider, figure 2-39). 

Figure 2-39 

WebClient client — new WebClien u ( ) ; 

client . DownloadStringCompleted +-new I>ownloadStringConipletedEventHandler (B ]: . 

[Appuyez sur IABULA1KJN pour generer le qestionm 

Visual Studio genere done la ligne de code suivante (avant-derniere instruction de la 
fonction b F 1 i c k r_C 1 i c k) : 

cl ient. DownloadStringCompleted 

+= new Downl oadStringCompl etedEventHandlertcl ient_Downl oadStringCompl eted) ; 

ainsi que la fonction de traitement, qu'il convient de completer : 

void client_DownloadStringCompleted(object sender, 

Downl oadStringCompl eted EventArgs e) 

{ 
} 
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Dans cette fonction de traitement, e. Result contient (dans une chaine de caracteres) la 
reponse XML. 

Ne reste ensuite qu'a lancer l'operation de requete aupres de Flickr (derniere instruction 
de la fonction bFl ickr_Cl ick) : 

cl ient. Downl oadStringAsync(new Uri (url ) ) ; 

ou 1' argument est un objet base sur FURL ou Flickr traite les requetes (URL qui incorpore 
dans ses arguments votre code d'acces ainsi que le critere de recherche). Reportez-vous 
au chapitre 13 pour de plus de details. 

Nous allons maintenant realiser le carrousel tournant dont la technique sera expliquee en 
detail au chapitre 9. Pour cela, il convient de definir une transformation de type Rotate- 
Transform et d'animer Tangle de rotation en le faisant passer de 0 a 360degres en 
10 secondes et en repetant cette animation a l'infini (sauf pendant les temps de charge - 
ment d'une nouvelle serie d'images). Le centre de rotation est defini en coordonnees 
relatives dans l'attribut RenderTransformOrigin : 

<Grid x: Name="GrImagesAnimees" 

Background="Transparent" RenderTransform0rigin="0.5, 0.5" > 
<Grid.RenderTransform > 

<RotateTransform x:Name="rotCarrousel " Angle="0" /> 
</Grid. RenderTransform> 
<Grid.Resources> 

<Storyboard x:Name="stbCarrousel " > 
<Doubl eAnimation Storyboard.TargetName="rotCarrousel " 

Storyboard.TargetProperty="Angl e" From="0" To="360" Duration="0:0:10" 
RepeatBehavior="Forever" /> 
</Storyboard> 
</Grid.Resources> 

<Ellipse x:Name="rail " StrokeThickness="10" Stroke="Gray" 
Width="500" Height="500" /> 

</Grid> 

Reste desormais a analyser la reponse XML de Flickr, ce que nous verrons en detail au 
chapitre 13. 

Pour decortiquer ce XML de reponse, nous allons utiliser la technologie Li nq for Xml , le 
langage d' interrogation et de manipulation de donnees maintenant integre a C# et VB 
(reportez-vous au chapitre 12 pour plus d' informations a ce sujet). 

Pour utiliser Linq for Xml , une bibliotheque de code doit etre integree au programme. Pour 
cela, selectionnez Ajouter une reference. . . dans l'Explorateur de solutions, partie Silverlight 
(figure 2-40). Choisissez ensuite System. Xml .Linq dans l'onglet .NET. La DLL de code 
pour Li nq for Xml sera ainsi integree au projet et finalement greffee dans le fichier XAP 
envoye au navigateur (figure 2-41). 



42 



Silverlight 2 



Figure 2-40 
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Nous allons maintenant decortiquer la reponse XML, creer dynamiquement les compo- 
sants Image (dont on ignore exactement le nombre mais qui sera compris entre zero et six), 
telecharger les images depuis Flickr et finalement les accrocher au carrousel tournant. 
Tout cela sera explique en detail aux chapitres 6 (creation dynamique de composants), 
12 (Linq for XML) et 13 (services Web). 

Etant donne les objets utilises pour realiser cette animation, il convient d'ajouter les trois 
espaces de noms suivants en tete du fichier Page.xaml .cs : 

using Sy stem. Xml .Linq; 

using System. Windows. Markup; 

using System. Windows. Media. Imaging; 

Ce processus d'ajout d'espaces de noms peut etre automatise. Par ailleurs, si Visual Studio 
ne semble pas connaitre une classe ou si une erreur est signalee sur un nom de classe, 
cliquez droit sur le nom de la classe et selectionnez Resoudre. Visual Studio procedera 
alors automatiquement a l'ajout. 

Dans la mesure oil le nombre d'images qui seront affichees n'est pas connu (ce nombre 
varie en effet d'une requete a 1' autre), il convient de placer les composants Image dans une 
liste dynamique d'images (il s'agit d'une liste qui s'agrandit automatiquement en fonction 
des insertions). La declaration et l'instanciation dans la classe est effectuee en dehors des 
fonctions afin que 1 i stelmages soit accessible partout : 

Li st<Image> 1 i stelmages = new List<Image>( ) ; 

Dans la fonction qui traite l'evenement DownloadStringCompleted, stoppez le carrousel et 
videz-le (ainsi que 1 i stelmages) des images qui s'y trouvaient : 

void client_DownloadStringCompleted(object sender, 

Downl oadStri ngCompl etedEventArgs e) 

{ 

stbCarrousel . Pause( ) ; 

int N = listelmages. Count; // nombre actuel d'images 

for (int n = 0; n < N; n++) 

{ 

Image img = 1 istelmages[0] ; 

Gr Images An imees. Children. Remove (img) ; 

1 i ste Images. RemoveAt(O) ; 

img = nul 1 ; 

} 



Decortiquez a present le XML de reponse en passant par les balises rsp, photos et photo. 
Cette derniere balise est repetee pour chaque image disponible et contient, dans ses attri- 
buts, le titre de la photo ainsi que des informations permettant de reconstituer l'URL de 
1' image sur le site de Flickr (toutes les operations sont expliquees en detail dans la suite 
de l'ouvrage). 
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XDocument xml = XDocument. Parse(e. Result) ; 

var liste = from p in xml .Element("rsp").Element("photos").Elements("photo") 
select p; 

liste = liste. Take(6); // six photos au maximum 
N = liste. CountO; 

Pour chaque photo recherchee sur le site de Flickr : 

for (int n = 0; n < N; n++) 

{ 



} 

il faut construire dynamiquement un composant Image (ici, a partir d'une balise XAML, 
voir la section « Creation dynamique a partir du XAML » du chapitre 6) : 

string sXaml Image = "<Image xmlns='http://schemas. microsoft.com/client/2007' " 
+ " Width='200' Height='200' HorizontalAl ignment=' Left' " 
+ "VerticalAl ignment='Top'/>" ; 

Image img = ( Image)Xaml Reader . Load(sXaml Image) ; 

II convient ensuite de preparer l'URL de 1' image (sur le site de Flickr) a partir d'attributs 
de la balise photo (voir la section « Application au service Web Flickr » du chapitre 13) : 

string sFarm = liste. ElementAt(n).Attribute("farm"). Value; 
string sServer = 1 iste. El ementAt(n) .Attribute( "server" ) .Val ue; 
string sld = 1 iste. El ementAt(n) .Attributet "id" ) . Val ue; 
string sSecret = 1 iste. El ementAt(n) .Attribute( "secret" ) .Val ue; 
string sLIrl = "http://farm" + sFarm + ".static.flickr.com/" + sServer + "/" + sld 
+ "_" + sSecret + ".jpg"; 

La position de la photo sur le rail est ensuite calculee (s'il y a X photos, elles font entre 
elles un angle de 360/X degres) : 

double R = rail .Width / 2; 
double angle = 2 * 3.14 * n / N ; 

double X = ActualWidth / 2 + R * Math.Cos(angle) - 75; 
double Y = ActualHeight / 2 - R * Math.Sin(angle) - 75; 

Celle-ci est ensuite positionnee sur le rail : 

img. Margin = new Thickness(X, Y, 0, 0); 

puis recuperee sur le site de Flickr : 

ImageSource imgs = new Bitmaplmage(new Uri(sLlrl)); 
img.SetVal ue ( Image. SourceProperty, imgs) ; 

L image est alors « accrochee » sur la grille transparente et inseree dans la liste d' images : 

GrlmagesAnimees . Children. Add (img) ; 
listelmages.Add(img) ; 

Enfin, le carrousel tournant est lance : 



stbCarrousel .BeginO; 



La figure 2-42 montre le resultat final. 
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A noter que Ton pourrait stabiliser les images en leur dormant une rotation inverse a celle de 
la grille (ce qui sera le cas pour le programme d'accompagnement presente au chapitre 7). 
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Les elements visuels d'interface (UI elements en anglais, UI signifiant User Interface), 
tels que les boutons, les boites de listes, les images, les figures geometriques, etc., doivent 
etre places dans des conteneurs. Generalement (c'est le cas par defaut), on compte un 
conteneur Silverlight par page Web contenant du Silverlight. Au chapitre 16, nous 
verrons comment modifier les fichiers .html ou .aspx pour que la page Web ne soit que 
partiellement Silverlight, avec un ou plusieurs conteneurs Silverlight en superposition 
d'elements HTML (ouASP.NET ou PHP). 

Dans ce chapitre, nous etudierons les trois conteneurs de base de Silverlight ainsi que 
Scroll Viewer et Border (il s'agit de conteneurs car ces composants contiennent d'autres 
composants). 

Les conteneurs de base 

Silverlight 2 propose trois types de conteneurs (egalement appeles layout panels) : 

• le canevas (objet Canvas), dans lequel les elements sont deposes en specifiant leurs 
coordonnees ; 

• le StackPanel , dans lequel les objets sont automatiquement empiles les uns au-dessous 
des autres ou les uns a cote des autres, en fonction de l'orientation du panneau ; 

• la grille (balise Grid), dans laquelle les objets sont places dans des cellules (a l'inter- 
section d'une rangee et d'une colonne), la grille pouvant s' adapter automatiquement a 
la taille de la fenetre du navigateur. 

Comme vous pouvez le constater en examinant le fichier XAML d'une page Silverlight, 
ces conteneurs sont eux-memes inseres dans une balise UserControl mais cela n'a pas 
d' importance a ce stade. 

Disons deja que les classes Canvas, StackPanel et Grid sont derivees de la classe Panel. 
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Par defaut, Visual Studio propose la grille comme conteneur principal lors de la creation 
d'un nouveau projet Silverlight (ici, le fichier nomme Page.xaml par defaut) : 

<UserControl x:Cl ass="SLProg. Page" 

xmlns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xml ns :x="http: //schema s .microsoft.com/winfx/2006/xaml " 
Width="400" Height="300"> 
<Grid x:Name="LayoutRoot" Backgroimd="White"> 

</Grid> 

</UserControl> 

Par defaut, la grille presente un attribut Background correspondant a la couleur de fond 
(voir chapitre 4) ainsi que 1' attribut x : Name correspondant au nom interne du conteneur. A 
l'interieur de la balise Grid, d'autres balises permettront de decrire plus precisement la 
grille, notamment le nombre et la taille des rangees et des colonnes mais aussi le contenu 
des cellules. 

Par ailleurs, le conteneur principal est egalement place par defaut dans un user control 
qui limite la taille du conteneur a un rectangle de 400 x 300 pixels (attributs Width et 
Height). Ces deux attributs seront generalement modifies, et meme le plus souvent 
supprimes afin que la grille occupe toute la fenetre du navigateur. 

Dans ce chapitre, nous ne placerons dans les conteneurs qu'un seul type d'element UI, a 
savoir le bouton (et encore, reduit a sa plus simple expression) afin de nous concentrer sur les 
conteneurs. A ce stade de l'etude de Silverlight, il n'est en effet pas question de realiser 
une application spectaculaire mais bien d'en maitriser les differents elements de base. 

Les sections suivantes detaillent les trois conteneurs de base de Silverlight. 

Le canevas 

Balise de canevas 

On peut assimiler le canevas de Silverlight a celui utilise pour creer une tapisserie ou un 
tableau : des elements visuels (boutons, images, boites de listes, etc.) y sont deposes a 
des emplacements bien definis. 

Pour imposer un canevas comme conteneur principal, il suffit de remplacer le mot-cle 
Grid par Canvas dans le fichier Page.xaml cree par defaut par Visual Studio. Profitez-en 
egalement pour modifier ses dimensions (portees ici a 800 x 600 pixels) ainsi que la 
couleur de fond (ici, la couleur AliceBlue) de maniere a rendre les choses plus visibles 
lors de l'execution de 1' application Silverlight : 

<UserControl x:Cl ass="SLProg. Page" 

xml ns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xml ns :x="http: //schema s .microsoft.com/winfx/2006/xaml " 
Width="800" Height="600"> 
<Canvas Background="Al i ceBl ue"> 

</Canvas> 

</UserControl> 
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Le canevas a maintenant une largeur (attribut Wi dth) de 800 pixels et une hauteur (attribut 
Height) de 600 pixels. Cette taille pourrait etre specifiee en attributs du Canvas plutot 
qu'en attributs du UserControl. En supprimant les deux attributs Width et Height (dans les 
balises UserControl et Canvas), le canevas occupe toute la fenetre du navigateur, mais sans 
adaptation automatique de son contenu (par stretching). 

La couleur de fond est maintenant Al i ceBl ue (voir la section « Les couleurs » du chapi- 
tre 4). Comme nous le verrons au chapitre 4, il pourrait s'agir d'un degrade de couleurs 
mais aussi (voir la section « Les images comme motifs de pinceau » du chapitre 7) d'une 
image, voire d'une video. 

Le contenu du canevas 

Nous allons a present ajouter deux boutons au canevas (les boutons, tout comme la 
plupart des composants seront etudies au chapitre 5). Le libelle d'un bouton est specifie 
dans 1' attribut Content de la balise Button. Au chapitre 15, nous verrons comment changer 
fondamentalement son apparence sans que cela ait d'influence sur son fonctionnement. 
Ici, nous nous contentons d'un bouton standard avec libelle. 

<Canvas Background="Al iceBl ue"> 
<Button Content="Bl" Canvas . Left="50" Canvas .Top="50" Width="90" Height="70" /> 
<Button Content="B2" Canvas . Left="250" Canvas .Top="80" Width="90" Height="70"/> 

</Canvas> 

Les coordonnees du coin superieur gauche du bouton (mais aussi, de maniere generale, 
de tout element UI) sont specifiers dans les attributs suivants : 

• Canvas. Left pour 1' axe des X ; 

• Canvas. Top pour l'axe des Y. 

L'axe des X est dispose horizontalement, de gauche a droite, et se confond avec le bord 
superieur du conteneur, done ici (puisqu'il s'agit du conteneur principal) avec celui de la 
fenetre du navigateur (et plus precisement le bord superieur situe a l'interieur de cette 
fenetre, ce que Ton appelle aussi la zone client ou client area en anglais). L axe des Y est 
vertical, de haut en bas, et se confond avec le bord gauche du conteneur. 

Ces coordonnees sont relatives au canevas dans lequel l'element est directement insere. 
Un canevas peut en effet etre imbrique dans un autre canevas. 

L'unite est le pixel. Dans l'exemple presente ici, les attributs Canvas. Left et Canvas. Top, 
mais aussi Width et Height, contiennent des valeurs entieres, ce qui est normal puisqu'il 
s'agit de pixels. On pourrait cependant specifier des valeurs decimales (avec le point 
comme separateur, par exemple, 50.2). Les decimales prennent toute leur importance lors 
d'operations dites de stretching qui permettent d'agrandir ou de retrecir des elements UI, 
y compris le canevas (voir la section « Les transformations » du chapitre 9). 

Deux boutons apparaissent desormais dans la fenetre du navigateur (figure 3-1) : 
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Figure 3-1 
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Attributs et proprietes 

Dans la mesure oil les balises du XAML correspondent a des objets (manipulables par 
programme) connus du run-time Silverlight (ici, un objet Canvas et deux objets Button), 
on peut confondre « balise » et « objet ». De meme, les attributs de ces balises correspondent 
aux proprietes de ces objets. C'est le cas, par exemple, pour Width et Height. Les termes 
« attributs » et « proprietes » seront done employes indifferemment pour designer les 
memes choses. 

Cependant, les attributs Canvas. Left et Canvas. Top ne correspondent pas a des proprietes 
intrinseques d'un objet Button. On parle alors de proprietes attachees car il s'agit de 
proprietes d'un bouton relatives a un autre objet (ici, le canevas conteneur). La conse- 
quence de cette distinction est que les proprietes attachees sont lues et modifiees diffe- 
remment (avec SetVal ue, voir chapitre 6). 

Nous aurons 1' occasion de presenter des exemples oil differents canevas (mais aussi 
d'autres conteneurs) se superposent avec des effets de transparence. Les graphistes sont 
en effet devenus experts dans ces combinaisons. Ces differentes couches (layers en 
anglais) superposees (qui apparaissent comme une seule a l'utilisateur) permettront de 
realiser des effets visuels ou des animation spectaculaires. 



Le StackPanel 



Dans le conteneur qu'est le StackPanel (litteralement « panneau d'empilement »), les 
elements UI sont disposes : 

• les uns au-dessous des autres si l'attribut Orientation a pour valeur Vertical , ce qui est 
le cas par defaut ; 
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• les uns a cote des autres (de gauche a droite) si l'attribut Orientation a pour valeur 
Horizontal . 

Par exemple (l'attribut Orientation etant ici superflu puisqu'il s'agit de la valeur par 
defaut) : 

<StackPanel Background="Beige" Orientation="Vertical "> 

<Button Content="Bl" Width="90" Hei ght="70" /> 

<Button Content="B2" Width="90" Hei ght="70" /> 
</StackPanel> 

La figure 3-2 montre le resultat obtenu dans le navigateur : 



Figure 3-2 
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Ici, il n'est plus necessaire de specifier la position exacte des composants car le StackPanel 
s'en charge automatiquement. 

En general, un StackPanel est insere dans un canevas ou, plus souvent, une grille (pour 
realiser un menu, par exemple). II est en effet rarement repris comme conteneur princi- 
pal. 

Si un panneau a orientation verticale a une largeur de W pixels et est insere dans une 
grille ou une cellule de grille, il est par defaut centre horizontalement dans son conteneur 
et occupe toute la hauteur de celui-ci (la propriete Vertical Al ignment du StackPanel prend 
alors automatiquement la valeur Stretch). Ce comportement par defaut peut etre modifie 
en ajoutant l'attribut HorizontalAlignment et en lui attribuant la valeur Left ou Right (Center 
etant la valeur par defaut). Vertical Al ignment peut aussi prendre les valeurs Top, Center et 
Bottom et dans ce cas, Height doit etre specifie. 

Si vous specifiez une hauteur pour ce panneau a orientation verticale, celui-ci sera accole 
au bord superieur ou au bord inferieur en fonction des valeurs Top ou Bottom de l'attribut 
Vertical Alignment. La valeur par defaut (en l'absence de Height) est Stretch, qui adapte 
automatiquement la hauteur du panneau a celle de son conteneur (et lui fait done occuper 
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toute la hauteur du conteneur). En presence de Height, la valeur par defaut de Vertical - 
Al i gnment est Center. 

Un raisonnement analogue s'applique au panneau a orientation horizontale : le StackPanel 
occupe toute la surface de son conteneur (grille ou cellule de grille) si les attributs Width 
et Height sont absents (HorizontalAlignment et VerticalAlignment valent alors Stretch). Si 
le panneau horizontal a une hauteur de H pixels, il est centre verticalement et occupe 
toute la largeur de son conteneur (HorizontalAlignment vaut Stretch et VerticalAlignment 
vaut Center). II faut faire passer Vertical Al i gnment a Top pour que le panneau soit accole 
au bord superieur de son conteneur. 

Si le StackPanel est contenu dans un canevas, il faut specifier Width et Height en attributs 
du StackPanel . 

Dans l'extrait de code XAML precedent, les boutons sont accoles les uns aux autres, sans 
la moindre marge. Ce probleme peut etre aisement resolu en ajoutant un attribut Margin 
(ici dans la balise Button mais de maniere plus generale dans n'importe quel element UI). 
Cet attribut ajoute des marges a chaque bord de 1' element UI, celles-ci etant specifiees 
comme indique dans le tableau 3-1. 

Tableau 3-1 - Specifications des marges via I'attribut Margin 
Marges autour d'un element UI 

Margin="10" Marge de 10 pixels autour de chaque bord. 

Margi n=" 10 , 20" Marge de 1 0 pixels a gauche et a droite, et marge de 20 pixels au-dessus et au-dessous. 

Margin="10, 20, 30, 40" Marge de 10 pixels a gauche, de 20 pixels au-dessus, de 30 pixels a droite et de 
40 pixels au-dessous. 

Du point de vue de la programmation, Margi n est de type « structure Thi ckness ». Ses champs 
Left, Top, Ri ght et Bottom correspondent respectivement aux bords gauche, superieur, droit 
et inferieur. 

Nous venons de voir comment un StackPanel est insere dans son conteneur. Voyons main- 
tenant comment les elements UI (boutons, etc.) sont accroches dans un StackPanel. 

Si un StackPanel a orientation verticale a une largeur de W pixels, les elements UI inseres 
dans ce StackPanel : 

• seront etendus a une largeur de W pixels s'ils ne contiennent pas d'attribut Wi dth ; 

• seront par defaut centres dans le StackPanel s'ils ont un attribut Width inferieur a 
Wpixels. En ajoutant I'attribut HorizontalAlignment dans la balise de l'element UI, on 
obtient un alignement a gauche avec la valeur Left de cet attribut et a droite avec Ri ght 
(la valeur par defaut est Center) ; 

• ne seront que partiellement affiches si Width est superieur a W pixels. 

De meme, dans le cas d'elements UI inseres dans un StackPanel a orientation horizontale, 
vous pouvez specifier VerticalAlignment avec ses valeurs Top, Bottom et Center (cette 
derniere etant la valeur par defaut). 
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Disons deja qu'il en va de meme pour les cellules de grille. 

Si le texte contenu dans un TextBlock (zone d'affichage) ou un TextBox (zone d'edition) 
parait aligne a gauche, cela est du a la propriete TextAlign de ces deux composants (la 
valeur par defaut de TextAl ign est Left) et cela n'a rien a voir avec Horizontal Al ignment et 
VerticalAlignment. 



La grille 

Definition de la grille 

La grille (balise Grid du XAML) constitue le conteneur le plus puissant. Sous reserve de 
supprimer les attributs Width et Height (dans la balise Grid mais aussi dans la balise User- 
Control), elle occupe toute la fenetre du navigateur et s'adapte automatiquement aux 
redimensionnements effectues par l'utilisateur. La grille presente des similitudes avec la 
balise tabl e du HTML, lorsque la largeur de celle-ci est de 100 %. 

Pour definir une grille, il sufht de specifier : 

• le nombre de rangees : autant de rangees que de balises RowDef inition dans la balise 
Grid.RowDefinitions ; 

• le nombre de colonnes : autant de colonnes que de balises ColumnDefinition dans la 
balise Grid. Col umnDefinitions. 

En l'absence de balise Grid.RowDefinitions, la grille ne comporte qu'une seule rangee, et 
une seule colonne si la balise Grid. Col umnDefinitions est absente. En l'absence de ces 
deux balises, la grille se resume a une seule cellule. 

Pour chaque element UI, il convient egalement d'indiquer dans quelle cellule il se 
trouve : numero de rangee (attribut Grid. Row) et numero de colonne (attribut Gri d . Col umn). 
La numerotation commence a zero. La valeur par defaut de Grid . Row et de Grid. Col umn 
est zero. 

Par exemple (il s'agit ici de la forme la plus basique de balise Grid, avec six boutons 
repartis sur deux rangees et trois colonnes et sans rien preciser quant aux tailles relatives 
des cellules) : 

<Grid Background="AliceBlue" > 
<Grid.RowDefinitions> <! — deux rangees --> 

<RowDefinition/> 

<RowDefinition/> 
</Gr id. RowDef i ni ti ons> 

<Grid.ColumnDefinitions> <! — de trois colonnes --> 

<Col umnDef ini t ion /> 

<Col umnDef ini t ion /> 

<Col umnDef ini t ion /> 
</Grid.Col umnDefinitions> 
<! — contenu des six cellules --> 

<Button Content="R0C0" Grid.Row="0" Grid. Col umn="0" /> 
<Button Content="ROCl" Grid.Row="0" Grid. Col umn="l" /> 
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<Button Content="R0C2" Grid.Row="0" Grid. Col umn="2" /> 

<Button Content="RlCO" Grid.Row="l" Grid. Col umn="0" /> 

<Button Content="RlCl" Grid.Row=T 

<Button Content="RlC2" Grid.Row="l" 
</Grid> 



Grid.Column="l" /> 
Grid. Col umn="2" /> 



La figure 3-3 montre le resultat obtenu dans le navigateur (par defaut, un element UI dont 
on ne specifie pas la taille occupe toute la surface de sa cellule). 

Figure 3-3 
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La grille occupe toute la fenetre du navigateur et s'adapte automatiquement a celle-ci. De 
meme, chaque bouton dans une cellule occupe toute la surface de sa cellule et s'adapte 
automatiquement a la taille de celle-ci. Rappelons que ceci n'est possible que si les attri- 
buts Width et Height ont ete supprimes des balises UserControl et Grid, ainsi que dans 
celles des elements UI. 

La presentation obtenue serait plus satisfaisante en ajoutant un attribut Margin a chaque 
bouton (ces derniers ne seraient plus accoles les uns aux autres). La figure 3-4 montre le 
resultat obtenu dans Safari apres ajout de Margin="20" a chaque balise Button. 
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Figure 3-4 
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L'utilisateur peut done redimensionner la fenetre du navigateur et voir la grille ainsi que 
son contenu s' adapter en consequence (les boutons deviennent plus petits ou plus 
grands). Cependant, il n'en va pas de meme pour la police de caracteres des libelles, dont 
la taille ne s'adapte pas automatiquement. 

Dans une grille, les attributs Canvas . Left et Canvas .Top ne sont pas pris en compte, meme 
s'ils sont presents dans une balise d'elementUI. L'attribut Canvas. ZIndex (attribut de 
positionnement relatif des couches superposees, voir la section « Les rectangles et les 
ellipses » du chapitre 5) est cependant pris en compte. 

Comme pour les autres conteneurs, une couleur de fond (attribut Background) peut etre 
specifiee. Des lignes en pointilles sont affichees et delimitent les rangees et colonnes si 
l'attribut ShowGridLines vaut true (false etant la valeur par defaut car cette possibility 
n'est generalement retenue que durant le developpement de 1' application). 

Si plusieurs composants occupent une meme cellule (memes valeurs dans Grid. Row et 
Grid. Column), ils se superposent, ce qui cree autant de couches eventuellement transpa- 
rentes. Ils peuvent etre decales les uns par rapport aux autres en appliquant une transfor- 
mation de type TranslateTransform (voir la section « Les transformations » du chapitre 9). 
Pour que ces composants soient places cote a cote, il faut les inserer dans un StackPanel 
(ou un canevas), lui-meme insere dans la cellule de la grille. 
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Pour placer un element UI (par exemple, un bouton) a un emplacement bien precis d'une 
cellule de grille, par exemple en (10, 20), on specif! e pour cet element UI : 

• Horizontal Al ignment a Left ; 

• VerticalAlignment a Top ; 

• Margin a "10, 20, 0, 0". 

Pour qu'une cellule particuliere de la grille ait une couleur de fond (ou un degrade de 
couleurs ou encore une image), il suffit d'inserer au prealable un rectangle de la couleur 
desiree (attribut Fi 1 1) dans la cellule mais sans lui specifier de largeur et de hauteur pour 
ce rectangle. D'autres elements UI peuvent etre inseres dans cette cellule et ils apparaitront 
en superposition de ce rectangle. 

Iln'est pas rare de rencontrer des grilles sans Grid.RowDefinitions ni Grid.ColumnDefinitions. 
Cette derniere est alors limitee a une seule cellule. Les composants « controles utilisateurs » 
(user control, voir chapitre 14) sont souvent realises de cette maniere, avec la seule cellule 
d'une grille comme conteneur. Le composant s'adapte ainsi automatiquement a son 
conteneur si Width et Height sont absents ou prend une faille specifique si Width et Height 
sont mentionnes dans la balise du controle utilisateur. 

Taille minimale et maximale 

II est possible de specifier une taille minimale et maximale pour un element UI, y compris 
pour le conteneur principal. Dans ce dernier cas, l'utilisateur ne pourra pas reduire sa 
fenetre de navigateur au-dessous de cette valeur (pour MinWidth et MinHeight) ou l'agrandir 
au-dela de cette valeur (pour MaxWidth et MaxHeight). 

Tableau 3-2 - Les attributs de taille minimale et maximale 

Attributs de taille minimale et maximale 

Taille minimale. S'il s'agit d'attributs du conteneur principal, l'utilisateur ne pourra pas redimension- 
ner sa fenetre et la retrecir au-dela de cette valeur. 

Taille maximale. S'il s'agit d'attributs du conteneur principal, l'utilisateur pourra redimensionner sa 
fenetre et l'agrandir au-dela de cette taille mais le conteneur restera limite a (MaxWi dth , MaxHei - 
ght). Par defaut, le conteneur est alors centre horizontalement dans la fenetre du navigateur mais 
ce comportement depend en fait de I'attribut Horizontal Al ignment (qui peut prendre les valeurs 
Center, Left et Right). 

MinWidth et MinHeight sont bien plus souvent specifies que MaxWidth et MaxHeight. 

Les proprietes Actual Width et Actual Height indiquent la largeur et la hauteur lors de la 
lecture de la propriete. Elles ne peuvent done etre utilisees qu'en cours d'execution de 
programme. Employez done bien Actual Width et Actual Height et non Width et Height. En 
effet, si les attributs Width et Height ne sont pas specifies dans la balise UserControl ou dans la 
balise du conteneur, les proprietes Wi dth et Height ne contiennent pas de valeur numerique 
(pour tester cette absence de valeur, il faut passer par Width. Equal s(Double.NaN) qui 
renvoie true dans ce cas). 



MinWidth 
MinHeight 

MaxWidth 
MaxHeight 
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Les attributs RowSpan et ColumnSpan 

Comme pour Tattribut tabl e du HTML, il est possible d'etendre une cellule de grille sur 
plusieurs colonnes (attribut Grid. Col umnSpan) ou sur plusieurs rangees (attribut Gri d . RowSpan). 
Ci-apres, une grille de trois lignes et de trois colonnes mais avec fusion de certaines cellules : 

<Grid Background="AliceBlue" > 
<Grid.RowDefinitions> 

<RowDefinition/> 

<RowDefinition/> 

<RowDefinition/> 
</Grid.RowDefinitions> 
<Grid.ColumnDefinitions> 

<Col umnDef ini tion/> 

<Col umnDef ini tion/> 

<Col umnDef ini ti on /> 
</Grid.Col umnDefinitions> 

<Button Content="R0" Grid.Row="0" Grid.Column="0" Grid. Col umnSpan="3" /> 
<Button Content="RlCO" Grid.Row="l" Grid. Col umn="0" Grid.RowSp«n="2" /> 
<Button Content="RlCl" Grid.Row="l" Grid. Col umn="l" /> 
<Button Content="RlC2" Grid.Row="l" Grid. Col umn="2" /> 
<Button Content="R2C2" Grid.Row="2" Grid. Col umn="l" Grid. Col umnSpan="2" /> 
</Grid> 



Figure 3-5 
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La figure 3-5 montre le resultat obtenu dans le navigateur : 

• la premiere cellule de la premiere rangee est etendue a trois colonnes (attribut 
Gri d . Col umnSpan a 3 pour cette cellule) ; 

• la premiere cellule de la deuxieme rangee est etendue sur deux rangees (attribut 
Grid. RowSpan a 2 pour cette cellule) ; 

• la deuxieme cellule de la troisieme rangee est etendue a deux colonnes (attribut 
Grid. RowSpan a 2 pour cette cellule). 

Les composants peuvent s'etendre sur plusieurs cellules, independamment de ce qui est 
specifie pour les cellules de la grille. II suffit de specifier Grid. RowSpan et/ou Grid. Col umnSpan 
dans la balise du composant. 

Largeur et hauteur des rangees et des colonnes 

II est possible de specifier des hauteurs et/ou des largeurs de maniere absolue ou relative 
en ajoutant un attribut Height dans une balise RowDefinition et/ou un attribut Width dans 
une balise Col umnDef i ni ti on. 



Tableau 3-3 - Specification des hauteurs et largeurs des rangees et colonnes 



Hauteur de rangee (Height) / largeur de colonne (Width) 


Height= 


"Auto" 


La rangee s'adapte en hauteur a son contenu, autrement dit au plus grand (ici, en hauteur) des 
elements Ul de la rangee (on peut cependant encore ajouter un attribut Margin a ce contenu). 


Height= 


"100" 


La hauteur de la rangee est de 100 pixels. 


Height= 


"3*" 


Avec le signe *, on specifie une hauteur (ou une largeur avec Width) en relation avec d'autres 
rangees (ou colonnes) dont la hauteur (ou la largeur) est specifiee de la meme maniere. Linter- 
preteur XAML de Silverlight calcule la somme des * et, a partir de la, un pourcentage (voir exem- 
ple ci-dessous). La valeur prefixant * peut etre decimale. 



Le comportement est semblable pour 1' attribut Width. 

Considerons l'exemple suivant pour illustrer les hauteurs et largeurs relatives : 

<Grid Background="AliceBlue" > 
<Grid.RowDefinitions> 

<RowDefinition Height="Auto" /> 

<RowDefinition Height="3*" /> 

<RowDefinition Height="7*" /> 
</Grid.RowDefinitions> 
<Gri d . Col umnDefinitions> 

<ColumnDefinition Width="200" /> 

<ColumnDefinition Width="2*" /> 

<Col umnDefinition Width="*" /> 
</Grid.Col umnDefinitions> 

<Button Content="R0Cl" Grid.Row="0" Grid. Col umn="l" Width="100" Height="80" /> 
<Button Content="RlC0" Grid.Row="l" Grid. Col umn="0" /> 
<Button Content="RlCl" Grid.Row="l" Grid. Col umn="l" /> 
<Button Content="RlC2" Grid.Row="l" Grid. Col umn="2" /> 
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<Button Content="R2C0" Grid.Row="2" Grid. Col umn="0" /> 
<Button Content="R2Cl" Grid.Row="2" Grid. Col umn="l" /> 
<Button Content="R2C2" Grid.Row="2" Grid. Col umn="2" /> 
</Grid> 

La hauteur de la premiere rangee depend de son contenu, ici, un bouton d'une hauteur de 
80 pixels. En l'absence de marges pour ce bouton (l'attribut Margin est absent), la 
premiere ligne a done une hauteur de 80 pixels. La hauteur restante (dans la fenetre du 
navigateur puisqu'il s'agit du conteneur principal) est partagee entre les deux autres 
lignes : 30 % pour la deuxieme (3 divise par 3 + 7) et 70 % pour la troisieme (7 divise 
par 3 + 7). 

La largeur de la premiere colonne a ete fixee a 200 pixels. La largeur restante (dans la 
fenetre du navigateur ou dans le conteneur de la grille) est partagee entre les deux autres 
colonnes : 66 % pour la deuxieme (2 divise par 2 + 1) et 33 % pour la troisieme (1 divise 
par 2+ 1). 

Rappelons que ces proportions seront respectees, meme apres un redimensionnement de 
la fenetre du navigateur par l'utilisateur. 

La figure 3-6 montre la page Web obtenue (bien stir, dans la pratique, les cellules contiendront 
des elements bien plus interessants). 



Figure 3-6 
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Rien ne s'affiche dans les premiere et troisieme cellules de la premiere rangee puisque 
rien n'est specifie pour celles-ci, mais on aurait pu preciser : 

• MinHeight et MaxHeight dans une balise Ron/Definition, ce qui donne respectivement la 
hauteur minimale et la hauteur maximale de cette rangee ; 

• MinWidth et MaxWidth dans une balise ColumnDefinition, ce qui donne respectivement la 
large ur minimale et la largeur maximale de cette colonne. 

Les grilles imbriquees 

Les attributs Grid.RowSpan et Grid. Col umnSpan n'offrent pas toujours la souplesse neces- 
saire (on rencontre en fait le meme probleme avec RowSpan et Col umnSpan du HTML). En 
effet, il est parfois necessaire de placer une grille a l'interieur d'une cellule, notamment 
pour donner aux cellules des largeurs differentes d'une rangee a l'autre. 

Dans l'exemple suivant, nous forcons : 

• dans la grille exterieure (qui va occuper toute la fenetre du navigateur) : trois rangees 
d'une seule colonne (aucune balise Grid. Col umnDefinitions n'est alors necessaire) ; 

• en premiere rangee (attribut Grid.Row="0"), une grille de deux colonnes est inseree sur 
une seule rangee (aucune balise Grid. RowDefinitions n'est alors necessaire pour cette 
derniere grille) ; 

• en deuxieme rangee, une grille limitee a une seule cellule est inseree (aucun besoin des 
lors de Grid. RowDefinitions et Grid.ColumnDefinitions pour cette derniere grille) ; 

• en troisieme rangee, une grille de trois colonnes est inseree sur une seule rangee. 

Le XAML correspondant a cette grille est le suivant : 

<Grid > <! — grille externe de trois rangees --> 
<Grid.RowDefinitions> 

<RowDefinition /> 

<RowDefinition /> 

<RowDefinition /> 
</Grid.RowDefinitions> 

<Grid Grid.Row="0" > <! — grille en premiere rangee --> 
<Grid.Col umnDefinitions> 

<ColumnDefinition/> 

<ColumnDefinition/> 
</Grid.ColumnDefinitions> 

<Button Content="R0C0" Grid.Row="0" Grid.Column="0" /> 
<Button Content="ROCl" Grid.Row="0" Grid.Column="l" /> 
</Grid> 

<Grid Grid.Row="l" > <! — grille en deuxieme rangee --> 
<Button Content="Rl" Grid.Row="0" /> 
</Grid> 

<Grid Grid.Row="2" > <! — grille en troisieme rangee --> 
<Grid.Col umnDefinitions> 
<ColumnDefinition/> 
<ColumnDefinition/> 
<Col umnDefinition/> 
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</Grid.ColumnDefinitions> 

<Button Content="R2C0" Grid. Row="2" Grid. Col umn="0" /> 
<Button Content="R2Cl" Grid.Row="2" Grid. Col umn="l" /> 
<Button Content="R2C2" Grid.Row="2" Grid. Col umn="2" /> 
</Grid> 
</Grid> 

La figure 3-7 illustre le resultat obtenu dans le navigateur (a noter que pour cet exemple 
encore simple, on aurait pu s'en sortir avec des RowSpan). 



Figure 3-7 
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L' etude des trois conteneurs de base etant terminee, passons maintenant en revue d'autres 
conteneurs aux utilisations plus specifiques. 

Conteneurs specifiques 

Le GridSplitter 

Grace au composant GridSplitter, l'utilisateur peut redimensionner les rangees et les 
colonnes d'une grille. II lui suffit pour cela de cliquer sur une ligne de separation et de la 
deplacer ensuite tout en maintenant le bouton de la souris enfonce. Les utilisateurs de 
Windows et de nombreux logiciels sont habitues a ce type de manipulation. 
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Le GridSpl itter ne fait pas partie du run-time Silverlight. Lorsque vous l'utilisez (par un 
glisser-deposer a partir de la boite d'outils de Visual Studio), celui-ci ajoute le code suivant 
(en gras) : 

<UserControl 

xml ns:my="cl r-namespace : System. Windows .Controls ;assembly=Sy stem. Windows. 
^Control s . Extended" 
x:Cl ass="SLProg . Page" 

xml ns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xml ns :x="http: //schema s .microsoft.com/winfx/2006/xaml " 

> 

Ceci signifie que le code du GridSpl itter ne fait pas partie du run-time Silverlight et doit 
de ce fait etre inclus dans une DLL separee, celle-ci etant incorporee dans le fichier XAP 
envoye a 1' application. De plus, la balise devra etre prefixee (vous pouvez choisir un 
autre prefixe que my a condition de modifier la ligne xml ns :my dans le UserControl ) : 

<my :GridSpl itter> </my:GridSplitter> 

Ainsi, on definit la grille (avec ses rangees et ses colonnes) et ensuite le GridSpl itter. 

Les attributs importants de GridSpl i tter sont HorizontalAlignment et Vertical Al ignment. 
Si l'attribut HorizontalAl ignment a pour valeur Stretch, l'utilisateur peut redimensionner 
une rangee. Si l'attribut Vertical Alignment a pour valeur Stretch, il peut redimensionner 
une colonne. 

Analysons l'exemple suivant : 

<Grid x:Name="LayoutRoot" Background="Beige" > 
<Grid.RowDefinitions> 

<RowDefinition /> 

<RowDefinition /> 
</Grid.RowDefinitions> 
<Grid.Col umnDefinitions> 

<Col umnDefinition /> 

<Col umnDefinition /> 
</Grid.Col umnDefinitions> 

<Button Content="R0C0" Grid.Row="0" Grid. Col umn="0" Margin="20" /> 
<Button Content="ROCl" Grid.Row="0" Grid. Col umn="l" Margin="20" /> 
<Button Content="RlCO" Grid.Row="l" Grid. Col umn="0" Margin="20" /> 
<Button Content="RlCl" Grid.Row="l" Grid. Col umn="l" Margin="20" /> 
<my: GridSpl itter Grid.Row="0" Grid. Col umn="0" Grid.RowSpan="2" 
Width="5" Background="Bl ue" 

Hori zontal Al i gnment=" Ri ght" Verti cal Al i gnment="Stretch" /> 
<my: GridSpl itter Grid.Row="0" Grid. Col umn="0" Grid. Col umnSpan="2" 
Height="5" Background="Red" 

Verti cal Al ignment="Bottom" HorizontalAl ignment="Stretch" /> 

</Grid> 
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Ce code permet de creer : 

• une premiere ligne de separation verticale (Vertical Al ignment a pour valeur Stretch) de 
couleur bleue (Background) et epaisse de 5 pixels (Width). La ligne de separation s'etend 
sur deux rangees (Grid. RowSpan) et se trouve adroite (Ho rizontalAl ignment a Right) de la 
cellule en (0, 0) ; 

• une ligne de separation horizontale (Hori zontal Al i gnment a pour valeur Stretch) de couleur 
rouge et haute (Height) de 5 pixels. La ligne de separation s'etend sur deux colonnes 
(Grid.ColumSpan) et se trouve sous (Vertical Alignment a Bottom) la cellule en (0, 0). 

La figure 3-8 illustre le resultat obtenu. 



Figure 3-8 
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Le curseur de la souris se transforme en double fleche lorsqu'il survole une ligne de sepa- 
ration ; si l'utilisateur clique et maintient le bouton de la souris enfonce, il peut redimen- 
sionner les cellules. La manipulation est done bien intuitive et conforme a 1' usage. 

Meme si Grid. RowSpan, ou Grid.ColumnSpan, vaut 1 (ou si cet attribut est absent, ce qui 
revient au meme), la ligne de separation est limitee a une seule cellule mais le redimen- 
sionnement implique toutes les cellules de la rangee ou de la colonne. 

Si l'attribut ShowPreview du GridSplitter vaut true, la ligne de separation suit la souris 
mais les cellules ne sont redimensionnees qu'apres relachement du bouton de la souris. 
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Interessons-nous a present a deux « petits » conteneurs. 

Le composant ScrollViewer 

Le composant ScrollViewer peut contenir des composants (image, canevas, grille, etc.) 
qu'il peut faire defiler dans une zone de taille plus reduite. L'utilisateur peut visualiser 
tout le contenu a l'aide de barres de defilement. 

Voici un exemple de code dans lequel le ScrollViewer est insere dans la cellule en 
deuxieme colonne de la deuxieme rangee pour pouvoir visualiser une image de grande 
taille (figure 3-9) : 

<ScrollViewer Grid.Row="l" Grid. Col umn="l" 
Horizontal Scrol 1 BarVisibil ity="Auto" 
Vertical Scrol 1 BarVisibi 1 ity="Auto" > 
<Scrol 1 Viewer. Content> 




« I 1 » 



Si les attributs Horizontal Scrol IBarVi si bility et Vertical Scrol IBarVi si bility ont la 
valeur Auto (il s'agit de l'une des valeurs de l'enumeration ScrollBarVisibility), les 
barres de defilement ne seront affichees qu'en cas de necessite (lorsque la taille du 
Scrol 1 Vi ewer est inferieure a celle du contenu). Avec la valeur Vi si bl e, la barre est syste- 
matiquement affichee. Les valeurs Hidden (pour cache) et Disabled, quant aelles, rendent 
les barres de defilement inoperantes. 
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Les proprietes Horizontal Offset et Verti cal Off set specifient les coordonnees du point qui 
est affiche dans le coin superieur gauche du Scrol 1 Vi ewer. Ces coordonnees sont relatives 
a son contenu, ici l'image. Ces deux proprietes sont en lecture seule. 

Le composant Border 

Le composant Border cree une enveloppe pour des composants. 

Analysons l'exemple suivant (sans oublier que le composant Border occupe toute la 
surface de sa cellule si Width et Height ne sont pas specifies) : 

<Border 

Background="LightGray" CornerRadius="3, 10, 60, 100" > 
<Button Content="G0 !" Width="60" Height="40" /> 
</Border> 

La figure 3-10 illustre le resultat obtenu. 



Figure 3-10 
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En attributs de Border, il est possible de specifier : 

• une couleur de fond (Background) pour le conteneur qu'est Border ; 

• une bordure, avec BorderThickness pour l'epaisseur (0 par defaut), et une couleur 
(BorderBrush car il s'agit plus precisement d'un pinceau) ; 

• des coins arrondis : une (memes arrondis a chaque coin), deux (pour des coins opposes) 
ou quatre valeurs. Dans ce cas, on indique le rayon de l'arrondi pour, successivement, 
le coin superieur gauche, le coin superieur droit, le coin inferieur droit et le coin 
inferieur gauche. 
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Dans ce chapitre, nous allons voir comment specifier les couleurs et les pinceaux. Nous 
etudierons egalement des techniques avancees telles que les degrades et les masques 
d'opacite, permettant de personnaliser l'aspect des composants. A la fin de ce chapitre, 
vous decouvrirez des exemples d'utilisation du logiciel Expression Blend, l'outil graphique 
generant du XAML et compagnon de Visual Studio et vous verrez comment les graphistes 
arrivent a obtenir certains effets. 

Les couleurs 

Une couleur peut etre specifiee comme valeur des attributs suivants : 

• Background : couleur de fond d'un conteneur mais aussi d'un TextBox (zone d'edition) 
et d'un Button ; 

• Fill : couleur de remplissage d'une figure geometrique comme Rectangl e ou El 1 i pse ; 

• Foreground : couleur de premier plan d'un TextBl ock (zone d'affichage, encore appelee 
label), d'un TextBox ou d'un Button ; 

• Stroke : couleur du contour des figures geometriques. 

En XAML, la valeur de ces attributs peut etre une chaine de caracteres (tout au moins 
pour les couleurs unies), bien qu'il s'agisse d'objets de la classe Brush ou d'une classe 
derivee de celle-ci. L'interpreteur XAML est en effet capable de convertir une chaine de 
caracteres (representant un nom de couleur) en un objet Brush. Nous verrons par la suite 
que ces attributs peuvent devenir des balises. 
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Un nom de couleur 

Comme en HTML, les noms de couleurs suivants peuvent etre utilises en valeur des attributs 
mentionnes precedemment : 



Tableau 4-1 - Les noms de couleurs en XAML 



Al i ceBl ue 


AntiqueWhite 


Aqua 


AquaMarine 


Azure 


Bei ge 


Bi sque 


Black 


BlanchedAlmond 


Blue 


BlueViolet 


Brown 


BurlyWood 






CadetBl ue 


Chartreuse 


Chocol ate 


Coral 


Cornf 1 ower 


Cornsi 1 k 


Crimson 


Cyan 






DarkBlue 


DarkCyan 


DarkGol denrod 


Darkgray 


DarkGreen 


DarkKhaki 


DarkMagenta 


DarkOl i veGreen 


DarkOrange 


DarkOrchid 


DarkRed 


DarkSalmon 


DarkSeaGreen 


DarkSlateBlue 


DarkSl ateGray 


DarkTurquoise 


DarkViolet 


DeepPink 


DeepSkyBl ue 


DimGray 


DodgerBl ue 


FireBrick 


Floralwhite 


ForestGreen 


Fuschi a 


Gainsboro 


GhostWhite 


Gold 


Gol denrod 


Gray 


Green 


GreenYel 1 ow 


Honeydew 


HotPink 








IndianRed 


Indigo 


Ivory 






Khaki 


Lavender 


LavenderBl ush 


LawnGreen 


LemonChiffon 


LightBlue 


LightCoral 


LightCyan 


LightGoldenrodYel- 
1 ow 


Li ghtGray 


LightGreen 


LightPink 


LightSalmon 


LightSeaGreen 


Li ghtSl ateGray 


LightSteelBlue 


LightYellow 


Lime 


LimeGreen 


Li nen 




Magenta 


Maroon 


MediumAquamarine 


Medi umBl ue 


MediumOrchid 


Medi umPurpl e 


Medi umSeaGreen 


MediumSl ateBl ue 


MediumSpringGreen 


MediumTurquoise 


MediumVioletRed 


MidnightBlue 


MintCream 


Mi styRose 


Moccasin 


NavajoWhite 


Navy 








OldLace 


Olive 


01 i veDrab 


Orange 


OrangeRed 


Orchid 


PaleGoldenrod 


Pal eGreen 


PaleTurquoise 


PaleVioletRed 


PapayaWhi p 


PeachStuff 


Peru 


Pink 


Plum 


PowderBl ue 


Purpl e 


Red 


RosyBrown 


Royal Bl ue 






Saddl eBrown 


Sienna 


Silver 


SkyBlue 


SI ateBl ue 


Tan 


Teal 


Thistle 


Tomato 




Violet 


Wheat 


White 


WhiteSmoke 






Yellow 


Yel 1 owGreen 
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Les representations sRGB et scRGB 

Les 130noms de couleurs du tableau 4-1 ne permettent pas de specifier une couleur avec 
toutes les nuances souhaitees. II existe des lors d'autres moyens de specifier une couleur : les 
representations sRGB et scRGB. Dans les deux systemes, une couleur est specifiee par une 
combinaison de trois couleurs de base : rouge, vert et bleu (respectivement red, green et blue). 

Un indice de transparence (aussi appele alpha channel) peut egalement etre specifie. Si 
une couleur est totalement ou partiellement transparente, le fond reste totalement ou 
partiellement visible a 1' emplacement des pixels de cette « couleur ». 

Le systeme SRGB 

Dans ce systeme, chaque quantite de rouge, de vert et de bleu est specifiee par une valeur 
entiere comprise entre 0 et 255. Une valeur de couleur, prefixee par le caractere #, est 
indiquee par trois ou quatre chiffres hexadecimaux (quatre si un alpha channel est specifie 
pour la transparence) : #rrggbb ou #aarrggbb. 

II est a craindre que seuls ceux qui, en d'autres temps, ont pratique l'assembleur dans la 
douleur et 1' abnegation qui seyaient a ce genre de programmation savent encore, pour en 
avoir vu l'interet, ce qu'est un nombre en representation hexadecimale. L' hexadecimal 
permet de representer les nombres de 0 a 15 a l'aide d'un seul signe : 0 a 9 (pour 0 a 9) 
puis A, B, C, D, E et F (pour les valeurs allant de 10 a 15). Ainsi : 

• hexadecimal A (equivalent a OA) correspond a la valeur (decimale) 10 ; 

• hexadecimal 12 correspond al8(lx(16 + 2)); 

• hexadecimal A4 correspond a 164(10x(16 + 4)) ; 

• hexadecimal FF correspond a 255 (15 x (16 + 15)). 

Le noir peut ainsi etre represente par #000000 (tous pixels eteints) et le blanc par #FFFFFF 
(tous pixels allumes) ; le rouge par #FF0000 (premier des trois octets a hexadecimal FF, 
equivalent a decimal 255 et deuxieme octet ainsi que troisieme a zero) ; le jaune (obtenu 
par un melange a parts egales de rouge et de vert) par #FFFF00. Puisque la valeur d'opacite 
(premier des quatre octets) est absente, ces couleurs sont opaques (autrement dit, le fond 
n'est pas du tout visible a cet emplacement). 

La calculatrice scientifique de Windows peut s'averer utile pour effectuer des conver- 
sions entre representation decimale et hexadecimale d'un nombre. Mais souvent, les 
graphistes trouvent plus simple d'utiliser le logiciel Expression Blend, qui permet de 
selectionner une couleur de maniere bien plus visuelle (voir la section « Les pinceaux 
dans Expression Blend » de ce chapitre). 

Pour ajouter de la transparence (une valeur comprise entre 0 et 255, avec 0 pour trans- 
parence totale et 255 pour opacite totale), specifiez deux chiffres hexadecimaux en tete 
des trois octets de couleur (avec done 00 pour fond entierement visible et FF pour une 
opacite totale, les valeurs intermediaries etant evidemment acceptees). Par exemple : 

Fill = "#80FF0000" 
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pour du rouge transparent a 50 % (car hexadecimal 80 correspond a decimal 128, moitie 
de 256). 

Seize millions de couleurs environ peuvent ainsi etre representees dans le systeme sRGB 
(plus precisement 256 x 256 x 256 couleurs). 

Le systeme scRGB 

Dans ce systeme (avec sc# comme prefixe pour une valeur de couleur), chacune des trois 
couleurs de base est specifiee par un nombre decimal compris entre 0 et 1. L' opacite est 
egalement representee par un nombre decimal compris entre 0 et 1 (il s'agit alors de la 
premiere des quatre valeurs). Ces trois ou quatre valeurs decimales (quatre en cas de 
transparence) doivent etre separees par une espace ou une virgule (utilisez toujours le 
point comme separateur des decimales). 

Le nombre de couleurs susceptibles d'etre ainsi representees est substantiellement plus 
important que dans le systeme sRGB. 

Voici deux exemples de representations de couleurs en scRGB : 

• Background = "sc#1.0, 0, 0", pour du rouge, sans mention de transparence (done, 
opacite totale) ; 

• Background = "sc#0.5, 1.0, 1.0, 0", pour dujaune semi-transparent. 

Par ailleurs, la transparence peut souvent etre egalement specifiee en attribut Opacity de 
balise (valeur decimale comprise entre 0 et 1). 



Les couleurs dans le code 

Jusqu'a present (sauf au chapitre 2), nous n'avons pas encore ecrit la moindre ligne de 
code en C# ou VB. Voyons neanmoins comment specifier une couleur dans le code. 

Une maniere simple - mais limitee - consiste a mentionner l'un des quatorze champs 
statiques de la classe Colors. Par exemple, Colors. Black (les autres valeurs sont Blue, 
Brown, Cyan, DarkGray, Gray, Green, LightGray, Magenta, Orange, Purple, Red, White et Yellow). 
Signalons egalement Col ors .Transparent, qui correspond a la transparence totale : le fond 
reste parfaitement visible la ou cette « couleur » est presente. 

La classe Col or contient la fonction FromArgb dont les quatre arguments (des valeurs entieres 
comprises entre 0 et 255) correspondent respectivement aux composantes alpha (transpa- 
rence, avec 0 pour transparence et 255 pour opacite), rouge, vert et bleu d'une couleur. 

Par exemple, pour dujaune (melange a parts egales de rouge et de vert) sans la moindre 
transparence, le code C# sera le suivant : 

Color c; 



c = Color. FromArgb (255, 255, 255, 0); 
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et le code VB : 
Dim c As Color 



c = Color. FromArgb(255, 255, 255, 0) 

Les arguments peuvent etre exprimes en decimal ou en hexadecimal. Par exemple, OxFF 
en C# et &HFF en VB pour la valeur 255. 

Un objet Color (meme s'il s'agit plus precisement d'une structure) presente les quatre 
proprietes A, R, G et B qui correspondent respectivement au canal alpha (transparence), au 
rouge, au vert et au bleu. Ces quatre proprietes, dont les valeurs sont comprises entre 0 et 
255, peuvent etre modifiees. Ainsi, en executant : 

c.A = 64; 

on rend la couleur contenue dans la variable c opaque a 25 % (car 64 represente le quart 
de 255). 



Les pinceaux 

Les pinceaux (brushes en anglais) sont utilises pour colorier le fond des elements visuels 
(propriete Fi 1 1 ou Background en fonction des objets), pour peindre le contour des formes 
(propriete Stroke) ou encore pour colorier les lettres (propriete Foreground). 

II est possible de creer des pinceaux de differentes sortes : 

• Sol idCol orBrush : couleur unie et aucun effet ; 

• LinearGradientBrush : degrade de couleurs le long d'une ligne droite ; 

• RadialGradientBrush : degrade de couleurs a partir d'un point ; 

• ImageBrush : une image est utilisee ; 

• VideoBrush : une video est jouee. 

Nous allons voir comment representer un pinceau en XAML. Bien qu'il soit plus simple (les 
graphistes semblent en tout cas preferer cette voie) d'utiliser Expression Blend, il est impe- 
ratif pour un programmeur de connaitre le XAML. Avec un peu d'habitude, vous trouverez 
peut-etre que programmer directement dans ce langage est finalement plus simple. . . 

Les pinceaux ImageBrush et VideoBrush seront traites au chapitre 7. 

Le pinceau SolidColorBrush 

II s'agit du plus simple des pinceaux, celui qui permet de colorier de maniere uniforme. 
Voici le code a saisir pour obtenir le pinceau SolidColorBrush (pour une couleur nominee) : 

• Background =, pour un conteneur, un bouton ou une zone d'edition ; 

• Fi 1 1 =, pour une forme geometrique comme le rectangle ou 1' ellipse ; 

• Foreground =, pour le premier plan des TextBox, TextBl ock et Button. 
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Pour que le fond du rectangle (voir la section « Les rectangles et les ellipses » du chapi- 
tre 5) suivant soit peint en rouge semi-transparent (1' image de fond dans le conteneur 
reste done partiellement visible), saisissez le code suivant : 

<Rectangle Fill="#80FF0000" /> 

La balise precedente pourrait etre ecrite de maniere tout a fait equivalente (puisqu'il 
s'agit du pinceau par defaut) en saisissant les lignes de code suivantes : 

<Rectangle > 

<Rectangle.Fill> 

<SolidColorBrush Col or="#80FF0000" /> 
</Rectangle.Fill> 
</Rectangl e> 

La balise SolidColorBrush pourrait egalement s'ecrire : 
<SolidColorBrush Color="sc#0.5, 1, 0, 0" /> 

ou 

<SolidColorBrush Color="Red" 0pacity="0.5" /> 

Le pinceau LinearGradientBrush 

Ce pinceau permet d'obtenir un degrade de couleurs le long d'une ligne. Dans le cas le 
plus simple, il suffit de specifier la couleur au point de depart (starting point en anglais) 
et celle au point d'arrivee (ending point). A noter qu'il est egalement possible de speci- 
fier des couleurs intermediaries. 

L'exemple de code suivant permet d'obtenir un degrade du noir au blanc (par defaut, du 
coin superieur gauche au coin inferieur droit, figure 4-1) : 

<Rectangle > 

<Rectangle.Fill> 
<LinearGradientBrush> 
<GradientStop 0ffset="0" Color="Black" /> 
<GradientStop 0ffset="l" Color="White" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

Figure 4-1 
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Par defaut, les emplacements (offset en anglais) le long de la ligne reliant le point de depart 
au point d'arrivee sont relatifs : 0 pour le point de depart et 1 pour le point d'arrivee. Par 
defaut aussi, cette ligne relie le coin superieur gauche au coin inferieur droit. Les attri- 
buts StartPoint et EndPoint permettent de choisir d'autres points de debut et de fin. 

Dans l'exemple de code suivant, la ligne de degrade est horizontale et situee a mi-hauteur 
dans le rectangle (figure 4-2) : 

<LinearGradientBrush StartPoint="0, 0.5" EndPoint="l, 0.5" > 

<GradientStop 0ffset="0" Col or="Bl ack" /> 

<GradientStop 0ffset="l" Color="White" /> 
</LinearGradientBrush> 



Figure 4-2 




StartPoint="0, 0.5" signifie 0 sur l'axe des X et 0,5 sur l'axe des Y, autrement dit au 
milieu du bord gauche. 

Les deplacements sont neanmoins absolus si l'attribut MappingMode de la balise Linear- 
GradientBrush a pour valeur Absolute. Avec cet attribut ainsi initialise et pour reprendre 
l'exemple precedent, StartPoint devrait etre (0, 75) et EndPoint (200, 75) si le rectangle 
avait une largeur de 200 pixels et une hauteur de 150 pixels. 

Les deplacements (attribut Offset), de meme que StartPoint et EndPoint, ne sont pas limites 
a l'intervalle 0 a 1 (ce qui permet de realiser des degrades aux effets interessants) mais 
rien n'est peint en dehors de l'intervalle relatif 0 a 1. 

Dans l'exemple de code suivant, le degrade suit une ligne horizontale a mi-hauteur (un 
rectangle au contour noir est affiche pour montrer la difference, figure 4-3) : 

<Rectangle Stroke="Bl ack" > 

<Rectangle.Fill> 

<LinearGradientBrush StartPoint="0, 0.5" EndPoint="l. 0.5" > 
<GradientStop 0ffset="0" Col or="Bl ack" /> 
<GradientStop 0ffset="0.5" Color="White" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangle> 
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Figure 4-3 




Si le degrade commence ou finit au milieu d'une figure, quelle sera alors la couleur utilisee 
au debut ou a la fin ? La couleur reprise jusqu'a ou a partir de ces emplacements depend de 
Fattribut SpreadMethod, pour lequel trois valeurs sont possibles (si aucun attribut SpreadMethod 
n'est specifie, le comportement est semblable a celui specifie par la valeur par defaut Pad) : 

• Pad : remplissage au debut avec la premiere couleur specifiee et a la fin avec la derniere 
couleur specifiee (ce qui explique pourquoi la partie droite du rectangle de la figure 4-3 
est restee blanche) ; 

• Repeat : le motif (entre StartPoint et EndPoint) est repete au debut et/ou a la fin ; 

• Ref 1 ect : meme comportement qu'avec la valeur Repeat mais avec un effet de miroir. 

Les figures 4-4, 4-5 et 4-6 illustrent les degrades obtenus en fonction des differentes 
valeurs de SpreadMethod pour le code suivant : 

<Rectangle > 

<Rectangle.Fill> 

<LinearGradientBrush StartPoint="0.4, 0.5" 
EndPoint="0.6, 0.5" 
SpreadMethod="xyz" > 
<GradientStop 0ffset="0" Col or="Bl ack" /> 
<GradientStop 0ffset="l" Color="White" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

oil xyz doit etre remplace par l'une des trois valeurs possibles, soit Pad, Repeat ou Ref 1 ect 
(n'oubliez pas qu'Offset estrelatif a l'intervalle StartPoint, EndPoint). 



Figure 4-4 

SpreadMethod= "Pad" 
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Figure 4-5 

SpreadMethod= "Repeat 




Figure 4-6 

SpreadMethod= "Reflect" 




Le pinceau RadialGradientBrush 

Le pinceau RadialGradientBrush differe du pinceau LinearGradientBrush par le fait que le 
degrade se fait le long de cercles concentriques. L'attribut GradientOrigin permet de 
specifier les coordonnees de ce centre. Par defaut, il s'agit du milieu de la figure a laquelle 
on applique un tel pinceau. 

L'exemple de code suivant correspond au cas le plus simple et permet d'obtenir le degrade 
de la figure 4-7. 

<Ellipse > 

<Ellipse.Fill> 
<RadialGradientBrush> 
<GradientStop Offset="0" Col or="Bl ack" /> 
<GradientStop Offset=T Color="White" /> 
</ Radial Gradient Brush> 
</Ellipse.Fill> 
</Ellipse> 
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Figure 4-7 




Le tableau 4-2 presente les proprietes du pinceau RadialGradientBrush pouvant etre specifiees : 



Tableau 4-2 - Les proprietes du pinceau RadialGradientBrush 



GradientOrigin 


Coordonnees du centre des cercles concentriques de degrade. Par defaut, il s'agit du centre de 
la figure (point 0.5, 0.5 en coordonnees relatives). Ces coordonnees peuvent neanmoins etre 
exprimees en pixels (mais toujours relativement a la figure) a condition de faire passer I'attribut 
MappingMode a Absolute. 


Radi usX 
RadiusY 


Le degrade peut etre limite aune ellipse dont les rayons sont RadiusX et RadiusY. Par defaut, 
ces valeurs sont relatives a la figure, Radi us X est egal a la moitie de la largeur de la figure et 
Radi usY a la moitie de la hauteur. 


Center 


Coordonnees du centre de la plus grande ellipse de degrade, cette ellipse ayant RadiusX et 
Radi usY comme rayons. Si GradientOrigin se trouve en dehors de cette ellipse, le degrade 
est limite a cette ellipse plus un cone forme par deux tangentes a cette ellipse a partir de 
GradientOrigin. 



Pour mieux comprendre 1' influence de ces quatre proprietes, visualisons le resultat dans 
des cas pratiques de degrades radiaux : 

Exemple 1 : 

<Ellipse Stroke="Bl ack" > 
<Ellipse.Fill> 
<Radial Gradient Brush 

Gradient0rigin="0.8, 0.5" > 
<GradientStop 0ffset="0" Col or="Bl ack" /> 
<GradientStop 0ffset="l" Color="White" /> 
</ Radial GradientBrush> 
</Ellipse.Fill> 
</Ellipse> 




Figure 4-8 
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Le degrade emane (propriete GradientOrigin) du point (0.8, 0.5) et s'etend a une ellipse ayant 
(0.5, 0.5) comme centre et de taille egale a l'ellipse (proprietes Center, Radi usX et Radi usY). 

Exemple 2 : 



<Rectangle Stroke="Bl ack" > 
<Rectangle.Fill> 
<Radi al GradientBrush GradientGrigin="l , 

Center="l, 1" > 
<GradientStop Offset="0" Col or="Bl ack" 
<GradientStop Offset=T Color="White" 
</ Radial Gradient Brush> 
</Rectangle.Fill> 
</Rectangle> 



/> 
/> 



Figure 4-9 




Le degrade emane du coin inferieur droit et est limite a une ellipse ayant egalement son 
centre au coin inferieur droit. Cette ellipse a pour rayons la moitie de la largeur et la 
moitie de la hauteur du rectangle (valeur par defaut en l'absence de Radi usX et Radi usY). 

Exemple 3 : 



<Rectangle Stroke="Bl ack" > 
<Rectangle.Fill> 
<Radi a 1 GradientBrush GradientOrigin="l , 
Center="0.5, 1" > 
<GradientStop Offset="0" Col or="Bl ack" 
<GradientStop Offset="l" Color="White" 
</ Radial GradientBrush) 
</Rectangle.Fill> 
</Rectangle> 



1" 

/> 
/> 



Figure 4-10 
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Le degrade emane du coin inferieur droit et est limite a une ellipse ayant son centre en 
(0.5, 1). 

Exemple 4 : 

<Rectangle Stroke="Bl ack" > 
<Rectangle.Fill> 

<RadialGradientBrush RadiusX="0.25" 

RadiusY="0.25" > 
<GradientStop Offset="0" Col or="Bl ack" /> 
<GradientStop Offset="l" Col or="White" /> 
</ Radial GradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 



Figure 4-1 1 




Le degrade est limite a une ellipse ayant comme rayons le quart de la largeur et de la 
hauteur de la figure (ici, un rectangle). En l'absence de GradientOrigin, le degrade radial 
emane du milieu de la figure. 

Exemple 5 : 

<Rectangle Stroke="Bl ack" > 
<Rectangle.Fill> 

<Radial Gradient Brush GradientOrigin="l,l" 
Center="0.25, 0.25" 
RadiusX="0.25" RadiusY="0.25" > 
<GradientStop 0ffset="0" Col or="Bl ack" /> 
<GradientStop 0ffset="l" Color="White" /> 
</ Radial GradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 



Figure 4-12 
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Le degrade emane du coin inferieur droit et est limite a une ellipse ayant son centre en 
(0.25, 0.25) et dont les rayons sont egaux au quart de la figure. Comme GradientOrigin se 
trouve en dehors de cette ellipse, l'enveloppe de degrade est completee par un cone forme 
de deux tangentes a cette ellipse, a partir de GradientOrigin. 

Exemple 6 : 

<RadialGradientBrush RadiusX="0.1" RadiusY="0.1" 
SpreadMethod="Ref 1 ect" > 

<GradientStop Col or="Transparent" Of f set="0 . l"/> 

<GradientStop Col or="Bl ack" 0ffset="0.9" /> 
</Radi al GradientBrush> 



<Ellipse.Fill> 

<RadialGradientBrush Gradient0rigin="0.75,0.25" > 
<GradientStop Col or="Si 1 ver" 0ffset="0" /> 
<GradientStop Col or="Brown" 0ffset="0.85" /> 
<GradientStop Col or="Brown" 0ffset="1.0" /> 
</ Radial Gradient Brush> 
</Ellipse.Fill> 
</Ellipse> 



Figure 4-13 




Exemple 7 : 



<Ellipse 



> 



Figure 4-14 
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Ce degrade donne l'illusion d'une sphere eclairee en haut a droite (a cause de GradientO- 
rigin et du choix des couleurs). 

Le masque d'opacite 

Le masque d'opacite ressemble en tout point a un degrade (lineaire ou radial) a la diffe- 
rence que seule la composante de transparence (premier des quatre octets de la couleur) 
est prise en compte. 

L'exemple de code suivant permet d'obtenir un degrade radial de transparence applique a 
une image (figures 4-15 et 4-16) : 

<Image Source="Monal_isa.jpg" > 

<Image.OpacityMask> 
<Radial Gradient Brush> 
<GradientStop Offset="0" Col or="#FF000000" /> 
<GradientStop Offset="l" Col or="#00000000" /> 
</ Radial GradientBrush> 
</ Image. OpacityMask> 
</Image> 

Image d'origine, sans degrade I 
de transparence P^li ■ 



a 

Les pinceaux dans Expression Blend 

Utilisation d'Expression Blend 

A la base, le XAML n'a rien de bien complique (et doit done etre maitrise facilement) 
mais les choses deviennent encore plus intuitives avec Expression Blend, meme si 
graphistes et programmeurs (qui doivent travailler main dans la main) n'ont pas toujours 
la meme notion de la difficulte. . . 



Figure 4-16 

Resultat obtenu avec degrade 
de transparence 
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Pour illustrer l'utilisation de ce logiciel, nous allons tout d'abord commencer par creer un 
nouveau projet dans Visual Studio qui contiendra uniquement un rectangle dans un 
conteneur (il s'agit d'un canevas mais cela n'a aucune d'importance, l'objectif etant tout 
simplement ici de peindre le rectangle avec l'aide d'Expression Blend) : 

<Rectangle x:Name="rc" Canvas . Left="10" Canvas .Top="10" Width="200" Height="150" 
Fill="Red"/> 

Un nom est attribue au rectangle (ici, re). Meme si la raison essentielle de ce nommage, 
a savoir la manipulation des composants par programme, n'est pas encore presente, il 
sera ainsi plus aise de retrouver un composant parmi tous les elements UI deja presents 
dans la fenetre Expression Blend (avec un rectangle seulement, cela ne pose bien entendu 
pas de probleme). 

Pour passer a Expression Blend, il vous suffit d'effectuer les operations suivantes dans 
Visual Studio : 

• enregistrez le projet ; 

• effectuez un clic droit sur le nom du fichier XAML (Page . xaml ) dans l'Explorateur de 
solutions ; 

• cliquez sur Ouvrir dans Expression Blend. 

Expression Blend travaille sur les memes fichiers que Visual Studio, ce qui assure l'inter- 
operabilite entre les deux logiciels, chacun permettant d'effectuer des taches bien distinctes : 
le developpement du programme pour Visual Studio et 1' amelioration visuelle de l'inter- 
face utilisateur pour Expression Blend. Toute modification effectuee dans l'un des logiciels 
est automatiquement repercutee dans 1' autre. 

Expression Blend est maintenant pret a modifier la page Silverlight (plus precisement le 
XAML). 

La fenetre Expression Blend (figure 4-17) est constitute de quatre panneaux verticaux 
(evidemment coulissants) qui sont, de gauche a droite : 

• la barre d'outils (l'outil de selection etant le premier) ; 

• le panneau des objets, parmi lesquels on retrouve le conteneur LayoutRoot et le 
rectangle rc ; 

• le panneau d'affichage ou espace de travail (on y retrouve le rectangle rouge) ; 

• le panneau des proprietes avec ses trois onglets (pour les proprietes du projet, celles de 
l'objet selectionne et celles des ressources). 

Les differentes icones situees en bas de l'espace de travail permettent d'agrandir la vue, 
d'effectuer un zoom, d'afficher une grille (ce qui aide au positionnement des objets) ou 
encore de faire agir les fils de cette grille comme aimants. 

Pour changer la couleur du rectangle, selectionnez-le par un double clic sur le nom de 
l'element UI nomme rc dans le panneau des objets ou par un clic sur l'element lui-meme dans 
l'espace de travail (au besoin, cliquez d'abord sur l'outil de selection dans la barre d'outils). 
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Le rectangle apparait alors selectionne dans l'espace de travail et ses proprietes s'affi- 
chent dans le dernier panneau de droite (si ce n'est pas le cas, cliquez sur l'onglet Properties 
de ce panneau). Vous pouvez deplacer le rectangle, modifier sa taille, l'incliner, etc. Vous 
ne seriez pas en train de lire cet ouvrage si vous aviez besoin d'aide pour cela. . . 

Les onglets Brushes et Appearance sont maintenant visibles pour l'element UI selectionne. 

L'onglet Brushes represents a la figure 4-18 permet de specifier la couleur de remplis- 
sage (Fill ou Background en fonction des objets, ici Fill puisqu'il s'agit d'un rectangle) 
ou celle du contour (Stroke). 

Ici, Fill est selectionne ainsi que le pinceau Sol idColorBrush de couleur unie (le deuxieme 
rectangle au-dessus de l'editeur de couleur est mis en evidence). 

Une couleur peut etre specifiee par sa valeur hexadecimale (prefixee du caractere #, ici 
rouge opaque avec #FFFF0000), par ses composantes R, G et B (valeurs comprises entre 0 
et 255) ainsi que par la valeur de A (transparence, soit un pourcentage compris entre 0 et 
100) ou encore par selection dans l'editeur de couleurs (comme on en trouve dans la 
plupart des logiciels de dessin). 
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Project tf x Piupetlies K Resources If x 



Name rc 
Type Rectangle 






Sur la colonne de droite de l'editeur de couleurs, vous trouverez deux petits triangles 
noirs se faisant face par la pointe (par defaut, ils sont situes en haut de la colonne). Depla- 
cez-les afin d'afficher d'autres nuances de couleur. Pour selectionner une couleur particu- 
liere, cliquez simplement dans le rectangle des nuances. Sa representation hexadecimale 
apparait alors immediatement dans la partie de droite. 



Figure 4-19 




L'onglet Appearence represents a la figure 4-19 permet de modifier les attributs du 
rectangle : opacite, rayons des coins arrondis et epaisseur du contour (StrokeThickness). 
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Pour changer une valeur (par exemple, StrokeThickness), vous pouvez la modifier 
manuellement mais aussi cliquer, en maintenant le clic, sur la zone d'edition et deplacer 
la souris vers la droite (pour augmenter la valeur) ou vers la gauche (pour la diminuer). 



Layout 

Width 200 

Height 150 

Left 10 

Top 10 




L'onglet Layout represents a la figure 4-20 permet de specifier la taille du rectangle, les 
coordonnees de son coin superieur gauche, les marges ainsi que les alignements (ce qui 
presente surtout de l'interet si le conteneur est une cellule de grille ou un StackPanel). 

Pour modifier ces valeurs, vous pouvez egalement cliquer sur le rectangle dans l'espace 
de travail pour le selectionner et le deplacer tout en maintenant le bouton de la souris 
enfonce. Pour modifier sa taille, il suffit de cliquer sur l'un de ses bords. 

Toutes les modifications ainsi effectuees dans Expression Blend sont repercutees dans le 
XAML. Pour vous en assurer, cliquez sur l'onglet vertical XAML de l'espace de travail. 
Avant de repasser a Visual Studio, enregistrez votre travail dans Expression Blend via le 
menu FiloSave all. Visual Studio detecte que le fichier XAML a ete modifie par un 
programme externe et vous demande votre accord avant de prendre en compte ces chan- 
gements. Confirmez en repondant Oui pour tout. 



Creer un degrade avec Expression Blend 
Les degrades lineaires 

Pour creer un pinceau avec degrade de couleurs dans Expression Blend, selectionnez le 
troisieme rectangle situe au-dessus de l'editeur de couleurs. Un autre editeur de couleurs 
apparait alors, legerement different du precedent et a couleur unie (figure 4-21). 

Selectionnez tout d'abord le type de degrade souhaite (lineaire ou radial) en cliquant sur 
l'un des deux boutons situes en bas a gauche ainsi que sur le bouton Options pour speci- 
fier les valeurs del'attribut SpreadMethod (Pad, Repeat et Reflect). Par defaut, il s'agit du 
degrade lineaire, avec Pad comme option. 

Vous pouvez maintenant selectionner les couleurs aux points intermediaires (les 
GradientStop du XAML). Pour cela, cliquez l'un des curseurs situes juste au-dessous de 
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l'echelle du degrade, deplacez-le jusqu'a l'emplacement souhaite et selectionnez la 
couleur correspondante en cliquant dans le rectangle des couleurs. La marque reflete 
aussitot la couleur selectionnee. 



Figure 4-21 




La marque de couleur intermediate peut etre deplacee le long d'une ligne horizontale 
par une operation bien connue de glisser-deposer. Pour ajouter des marques intermediai- 
res, cliquez sur l'echelle du degrade a l'endroit oil vous souhaitez ajouter une couleur. 
Pour supprimer une marque, cliquez dessus et faites-la glisser en dehors de l'echelle du 
degrade. 

Pour changer la ligne de degrade (par defaut, elle va du coin superieur gauche au coin 
inferieur droit), cliquez sur le bouton en forme d'epaisse fleche vers le bas et vers la 
gauche dans la barre d'outils (figure 4-22). Une fleche s'affiche alors en superposition de 
1' element UI (ici, un rectangle). 

Vous pouvez agrandir, retrecir et faire tourner la fleche de degrade en cliquant a ses alentours. 
Ces manipulations ont pour effet de modifier les attributs StartPoint et EndPoint du 
XAML. Le nouveau degrade est immediatement repercute dans le rectangle. 

Les degrades radiaux 

La figure 4-23 illustre l'exemple 6 de la section « Le pinceau RadialGradientBrush » 
precedente (ici, dans une ellipse plutot qu'un rectangle). C'est tellement intuitif avec 
Expression Blend que cela en devient plus simple a realiser qu'a expliquer ! En effet, il 
suffit de manipuler avec la souris la ligne et les enveloppes de degrades. 




Figure 4-23 
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Exemples d'utilisation des degrades 

Dans cette section, vous allez decouvrir certains effets obtenus par les graphistes et les 
techniques employees a cet effet. 



Le bouton « gel » 

Ce bouton est ainsi appele en raison de son aspect « gelatineux ». Pour creer un tel 
bouton (figure 4-24), l'astuce consiste a superposer deux rectangles aux bords arrondis, 
le second etant tres legerement plus petit et centre dans le premier. Dans le premier 
bouton, on realise un degrade lineaire du haut vers le bas entre deux couleurs qui sont ici, 
le vert fonce (green) et le vert clair (1 ime), tandis que dans le second rectangle, on realise 
un degrade (avec la meme ligne de degrade) allant du blanc opaque au noir transparent. 

Au chapitre 15, nous verrons comment realiser les effets visuels qui refletent le clic ou le 
survol de la souris. 




<Canvas > 

<! — premier rectangle --> 

<Rectangle Width="200" Height="50" RadiusX="15" Radi usY="15" 

Stroke="Bl ack" StrokeThickness="2" > 
<Rectangle.Fill> 
<LinearGradientBrush StartPoint="0,0" EndPoint="0,l" > 
<GradientStop Offset="0" Col or="Green" /> 
<GradientStop Offset="l" Color="Lime" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

<! — second rectangle, en superposition du premier --> 
<Rectangle Width="198" Height="48" RadiusX="14" RadiusY="14" 

Canvas . Left="l" Canvas .Top="l" > 
<Rectangle.Fill> 
<LinearGradientBrush StartPoint="0,0" EndPoint="0,l" > 
<GradientStop Offset="0" Color="White" /> 
<GradientStop Offset="l" Col or="#00000000" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

<! — libelle du bouton --> 

<TextBlock Text="Effet Gel" Foreground="White" 

FontFamily="Verdana" FontSize="17" FontWeight="Bold" 

Canvas . Left="60" Canvas .Top="12" /> 

</Canvas> 
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Le bouton gel correspondant a ce code (figure 4-24) est base sur un canevas et les 
proprietes attachees que sont Canvas. Left et Canvas. Top, ce qui est plus simple a ce stade 
de l'etude. Le code suivant correspond au meme bouton mais cette fois base sur une 
grille, ce qui presente l'avantage que la taille du bouton s'adapte automatiquement a la 
cellule de la grille ou prend la taille imposee par l'utilisateur. 

<Grid Grid.Row="l" Grid.Column="l" > 
<!-- premier rectangle --> 
<Rectangle RadiusX="15" RadiusY="15" 

Stroke="Bl ack" StrokeThickness="2" > 
<Rectangle.Fill> 
<LinearGradientBrush StartPoint="0,0" EndPoint="0,l" > 
<GradientStop Offset="0" Color="Green" /> 
<GradientStop Offset="l" Color="Lime" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

<!-- second rectangle, en superposition du premier --> 
<Rectangle RadiusX="14" RadiusY="14" 

RenderTransform0rigin="0.5, 0.5" > 
<Rectangl e. RenderTransform> 
<ScaleTransform ScaleX="0.98" ScaleY="0.98" /> 
</Rectangle. RenderTransform> 
<Rectangle.Fill> 

<LinearGradientBrush StartPoint="0,0" EndPoint="0,l" > 
<GradientStop 0ffset="0" Color="White" /> 
<GradientStop 0ffset="l" Color="#00000000" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

<!-- libelle du bouton --> 

<TextBlock Text="Effet Gel" Foreground="White" 

FontFami ly="Verdana" FontSize="17" FontWeight="Bold" 
Horizontal Alignment=" Center" Vertical Alignment=" Center" 

/> 

</Grid> 

L'effet « plastic » 

Cet effet (figure 4-25), aussi qualifie de tube eclaire, est obtenu a l'aide d'un seul rectangle, 
en specifiant plusieurs couleurs intermediaires (ici, dans les tons orange) le long de la 
ligne de degrade. 

Figure 4-25 ^^^^^^^^^^^^^^^^^ 



Effet plastic 
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<Grid > 

<Rectangle Width="200" Height="40" > 
<Rectangle.Fill > 
<LinearGradientBrush StartPoint="0,0" EndPoint="0,l" > 
<GradientStop Color="Red" Offset="0" /> 
<GradientStop Color="OrangeRed" 0ffset="0.07" /> 
<GradientStop Color="Orange" 0ffset="0.15" /> 
<GradientStop Color="OrangeRed" 0ffset="0.30" /> 
<GradientStop Color="Red" 0ffset="0.35" /> 
<GradientStop Color="FireBrick" 0ffset="0.45" /> 
<GradientStop Color="Sienna" 0ffset="0.9" /> 
<GradientStop Color="Sienna" Offset="l" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

<TextBlock Text="Effet plastic" Foreground="White" 

FontFamily="Verdana" FontSize="25" FontWeight="Bold" 
Horizontal Al ignment="Center" VerticalAlignment="Center" /> 

</Grid> 



L'effet « metal » 

Cet effet est obtenu en superposant deux rectangles et constitute done une variante du 
bouton gel. La couleur du premier rectangle est unie (ici, le gris) tandis que le second (en 
superposition du premier) offre un degrade de blanc de plus en plus transparent le long 
d'une verticale allant du bord superieur au milieu du bouton. 

Figure 4-26 ^^^^ m ^^^^ 



Effet metal 



<Grid > 

<! — premier rectangle --> 

<Rectangle Width="120" Height="80" RadiusX="7" RadiusY="7" Fill="DimGray" /> 

<! — second rectangle, avec degrade --> 

<Rectangle Width="110" Height="70" RadiusX="5" RadiusY="5" 

Canvas . Left="5" Canvas .Top="5" > 
<Rectangle.Fill> 
<LinearGradientBrush StartPoint="0, 0" EndPoint="0, 1" > 
<GradientStop Color="#D0FFFFFF" 0ffset="0" /> 
<GradientStop Color="#00FFFFFF" 0ffset="0.5" /> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

<TextBlock Text="Effet metal- 
Horizontal Al ignment="Center" Vertical Al ignment="Center" 
FontSize="18" Foreground="White" FontWeight="Bold" /> 

</Grid> 
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Le bouton « de verre » 

II s'agit d'un bouton rond dont l'aspect convexe est obtenu a Faide d'une petite ellipse avec 
degrade dans la partie superieure (figure 4-27). L'effet est realise a l'aide de trois ellipses : 

• une ellipse exterieure pour le collier ; 

• une ellipse pour le bouton lui-meme (uniformement vert) ; 

• une ellipse pour l'effet de lumiere rendant la forme convexe du bouton. 
Figure 4-27 




<Canvas > 

<!-- collier autour du bouton de verre --> 

<Ellipse Canvas. Left="13" Canvas .Top="13" Width="114" Height="114" 
Stroke="Black" Fill="White" /> 

<! — bouton de verre --> 

<Ellipse Canvas. Left="20" Canvas .Top="20" Width="100" Height="100" 

Stroke="Gray" Fill="Green" /> 
<!-- effet de lumiere dans la partie superieure --> 
<Ellipse Canvas. Left="31" Canvas .Top="21" Height="78" Width="78" > 
<Ellipse.Fill> 

<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,l" > 
<GradientStop Col or="#COFFFFFF" Offset="0" /> 
<GradientStop Col or="#70FFFFFF" 0ffset="0.3" /> 
<GradientStop Col or="#30FFFFFF" 0ffset="0.55" /> 
<GradientStop Col or="Transparent" 0ffset="0.8" /> 
</LinearGradientBrush> 
</Ell ipse. Fill) 
</Ellipse> 
</Canvas> 



L'effet d 'ombre 

L'exemple de code suivant montre comment utiliser les rectangles, les pinceaux et les 
transparences pour realiser un effet d' ombre donnant du relief aux pages (figure 4-29). 
L'astuce consiste a dessiner en fond d'image des rectangles legerement decales et de plus 
en plus opaques. 

<Canvas > 

<Rectangle Canvas . Left="2" Canvas .Top="2" Width="300" Height="380" 

Fill="Black" 0pacity="0.50" /> 

<Rectangle Canvas . Left="4" Canvas .Top="4" Width="300" Height="380" 

Fill="Black" 0pacity="0.40" /> 
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<Rectangle Canvas. Left="6" Canvas. Top="6" Width="300" Height="380" 

Fill="Black" 0pacity="0.20" /> 
<Rectangle Canvas. Left="8" Canvas. Top="8" Width="300" Height="380" 

Fill="Black" 0pacity="0.10" /> 
<Image Source="VG. jpg" Width="300" Height="380" Stretch="Fill " /> 
</Canvas> 



Figure 4-28 

Sans effet d' ombre 




Figure 4-29 

Avec un leger effet a" ombre 




5 



Une premiere serie 
de composants 



Dans ce chapitre, nous allons presenter une premiere - mais deja large - serie de compo- 
sants Silverlight : les figures geometriques telles que les rectangles ou les ellipses, les 
zones d'affichage (TextBlock), les zones d'edition (TextBox), les boutons, les barres de 
defilement, les calendriers, etc. Ceci nous permettra d'introduire le plus rapidement 
possible (mais dans des chapitres ulterieurs) les transformations, les animations ainsi que 
la manipulation d' elements UI par du code. 

Nous completerons 1' etude de ces composants au cours des chapitres suivants, nous 
reviendrons ensuite sur les composants lies aux donnees (chapitre 10) et nous appren- 
drons a personnaliser l'apparence de ces composants (chapitre 15) en permettant a un 
graphiste d'en modifier chaque sous-element, sans que cela implique un changement 
dans le code du programme. 

Dans la foulee des zones d'affichage etudiees dans ce chapitre, nous verrons egalement 
comment specifier des polices de caracteres. 

Les composants lies aux images et a la video seront traites au chapitre 7. Les boites de 
listes ainsi que les grilles de donnees seront traitees au chapitre 10. 
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Les rectangles et les ellipses 

Les rectangles et les ellipses sont des composants tres utilises, notamment pour en creer 
et en personnaliser d'autres. 

Pour illustrer leur fonctionnement, nous allons creer une nouvelle application Silverlight 
(appelons-la SLProg) et nous editerons le fichier nomme par defaut Page.xaml, qui contient 
la description XAML de la page Web. Pour cela, double -cliquez sur le nom du fichier 
dans l'Explorateur de solutions de 1' application. Editer du XAML est tres simple grace a 
l'aide contextuelle fournie par Visual Studio en cours de frappe. En effet, il suffit de taper 
les premieres lettres et Visual Studio vous indique ce qui peut suivre selon le contexte. 
Utilisez la combinaison de touches Ctrl + espace pour visualiser ce qu'il est possible de 
faire et la touche Entree pour valider une proposition de Visual Studio. 

Au lieu de taper le texte de la balise (par exemple, <Rectangl e), il est possible de proceder 
par un glisser-deposer (drag & drop en anglais) entre la boite d'outils et la fenetre 
d'edition du code XAML. II sufrit alors de completer les attributs de l'embryon de balise 
ainsi generee. 

Placez a present un rectangle rouge et un cercle vert dans un canevas. Les elements UI 
pourraient etre places dans une cellule de grille (cas le plus frequent), un StackPanel ou 
encore dans un conteneur insere dans une cellule de grille ou un StackPanel. L' option 
retenue pour cette application est le canevas mais la plupart des exemples mentionnes 
dans la suite de l'ouvrage utilisent la grille comme conteneur. Ajoutez ensuite deux bali- 
ses (l'une pour le rectangle et l'autre pour l'ellipse) dans le fichier Page.xaml : 

<UserControl x:Cl ass=" SLProg. Page" 

xml ns="http://schemas .mi crosoft . com/cl i en t/ 2007" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " > 
<Canvas x:Name="LayoutRoot" Background="Beige"> 
<Rectangle Canvas. Left="50" Canvas .Top="100" Width="120" 

Height="80" Fill="Red" /> 
<E1 1 i pse Canvas. Left="200" Canvas. Top="200" Width="150" 
Height="150" Fill="Green" /> 

</Canvas> 
</UserControl> 

Qu'en serait-il de ces deux balises si le conteneur etait d'un autre type que le canevas ? 
Dans le cas d'une ellipse ou d'un rectangle insere dans un StackPanel : 

• Canvas . Left et Canvas .Top ne doivent pas etre specifies et s'ils le sont, ces attributs sont 
ignores ; 

• il faut au moins specifier Width si le panneau est a orientation verticale et Height si 
l'orientation est horizontale. 

Dans le cas d'une ellipse ou d'un rectangle insere dans une cellule de grille : 

• Canvas . Left et Canvas .Top ne doivent pas etre specifies et s'ils le sont, ces attributs sont 
ignores (Canvas. ZInd ex, qui indique le positionnement relatif quand il y a superposi- 
tion, est cependant pris en compte) ; 
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• Width et Height sont egalement optionnels : en leur absence, 1'elementUI occupe la 
plus grande surface possible dans la cellule. 

Dans le cas d'un rectangle insere dans une cellule de grille, les attributs Canvas. Left et 
Canvas. Top sont simules au moyen du code suivant : 



<Rectangl e Horizontal Al ignment=" Left" Vertical Al ignment="Top" 
Margin="50, 100. 0, 0" Width="120" Height="80" Fill 



="Red" /> 



Le conteneur, c'est-a-dire le canevas pour cet exemple, contient desormais deux objets. 
On dit aussi qu'il a deux « enfants ». A la section « La creation dynamique d'objets » du 
chapitre 6, nous verrons comment construire, ajouter et supprimer de tels elements UI 
par programme (autre ment dit, comment construire dynamiquement 1' interface Web). 

La figure 5-1 represente le resultat de la page Web obtenue. II s'agit d'une page statique 
et peu attrayante (et somme toute impossible a realiser en HTML pur) mais cela n'a que 
peu d' importance car nous n'en sommes qu'a la mise en place des objets. 

Figure 5-1 



5 Silverlight Project Test Page - Windows Internet Explorer 
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Les elements visuels (ici, un rectangle et une ellipse) sont affiches a l'interieur du conte- 
neur (ici, un canevas). 

Le run-time Silverlight comprend que la balise Rectangl e correspond a un objet Rectangl e, 
evidemment affiche comme un rectangle. Les classes Rectangle et Ellipse sont derivees 
de la classe Shape, elle-meme derivee de FrameworkElement. Comme n'importe quel objet, 



96 



Silverlight 2 



un rectangle peut etre modifle et anime par programme, done en cours d' execution de 
programme. Nous aurons l'occasion de rencontrer plusieurs animations de ce genre. 

Un rectangle peut avoir les coins arrondis. Dans ce cas, les attributs RadiusX et RadiusY 
correspondent respectivement au rayon selon l'axe des X et au rayon selon l'axe des Y de 
1' ellipse (partiellement visible) affichee a chacun des quatre coins du rectangle. 

Les elements affiches dans la fenetre peuvent se superposer (voir l'attribut Canvas. ZIndex 
presente dans le tableau 5-1) ou etre partiellement transparents (attribut Opacity). 

Le tableau 5-1 presente les attributs utilises dans les extraits de code precedents et qui 
sont communs a tous les elements d'interface (mais parfois sous un autre nom pour Fi 1 1 
ou avec des restrictions, comme pour Canvas . Left et Canvas .Top). 

Tableau 5-1 - Les attributs des elements Ul 

Nom de l'attribut Description 

Fill La propriete Fi 1 1 indique comment peindre I'interieur de la figure. Son equivalent pour un 

conteneur mais aussi les boutons, les cases a cocher et les zones d'edition est la propriete 
Background. 

Des pinceaux de coloriage plus complexes, avec degrades de couleurs, peuvent etre speci- 
fies, comme nous I'avons vu a la section « Les pinceaux » du chapitre 4. Aucun contour n'est 
affiche en I'absence de la propriete Stroke. 

La propriete Fi 1 1 est de type Brush. Les types specialises de Brush (voir egalement la sec- 
tion « Les pinceaux » du chapitre 4) sont SolidColorBrush (pinceau de couleur unie), 
LinearColorBrush et Radial Col orBrush (pinceau avec degrade lineaire ou radial). 
Un nom de couleur peut etre specifie en valeur de l'attribut Fi 1 1 car I'interpreteur XAML est 
capable de transformer un nom de couleur en objet Sol idCol orBrush de cette couleur. Pour 
un pinceau plus complexe, il faut transformer Fill en une sous-balise de Rectangle ou 
Ellipse : 

<Rectangle > 

<Rectangle.Fill> 
<LinearGradientBrush /> 

</Rectanle.Fill> 
</Rectangl e> 

Opacity La propriete Opaci ty (valeur decimale comprise entre 0 et 1 ) indique la transparence de I'ele- 

ment. Par defaut, les elements sont affiches de maniere opaque (Opacity vautalors 1 et rien 
n'est visible sous I'element). Si Opacity vaut 0, I'element est entierement transparent et 
n'est done pas du tout visible. Comparons des opacites de 0.75 et de 0.25 : avec la valeur 
0.75, le fond reste partiellement visible mais moins visible qu'avec une Opacity de 0.25. 

Vi si bi 1 i ty Cette propriete indique si un element est visible ou non (par defaut, il Test evidemment). Les 

valeurs possibles sont Visibl e et Col 1 apsed (correspondant a « non visible »). 

x:Name Bien que cela ne soit pas encore necessaire dans une page Silverlight aussi eiementaire, il 

est possible d'attribuer un nom interne a n'importe quel element (attribut x:Name). Ceci per- 
met de manipuler I'element a partir du code C# ou VB, le nom de I'element devenant alors une 
variable dans la partie « programme ». Tres accessoirement, cela permet aussi de reperer 
plus aisement un element quand on passe a Expression Blend. 
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Tableau 5-1 - Les attributs des elements Ul (suite) 



Norn de I'attribut 


Description 


Canvas . 
Canvas . 


Left 
Top 


Canvas. Left et Canvas. Top correspondent aux ooordonnees de I'element (plus precise- 
ment, celles de son coin superieur gauche), par rapport au coin superieur gauche du canevas 
parent. Dans la mesure oil un canevas peut en contenir d'autres, il convient de preciser que 
ces coordonnees sont relatives au canevas parent le plus proche. Dans le cas d'une ellipse, 
il s'agit de la coordonnee du coin superieur gauche du rectangle (non affiche) entourant 
I'ellipse. 

Nous avons vu, avec HorizontalAl ignment et VerticalAl ignment, comment simuler 
Canvas. Left et Canvas. Top quand le conteneur est une cellule de grille. 






Canvas 


. ZIndex 


Dans la mesure ou des elements affiches dans la fenetre du navigateur peuvent se superpo- 
ser, ceux qui sont declares (dans le XAML) avant les autres peuvent etre caches (partielle- 
ment ou totalement) par ces derniers. Ce comportement par defaut (I'ordre d'affichage suit 
I'ordre des declarations) peut etre modifie par la propriete Canvas. ZIndex (n'importe quelle 
valeur entiere, avec 0 comme valeur par defaut). Lelement ayant le ZIndex le plus faible est 
affiche en premier (et peut done etre partiellement ou totalement cache) tandis que celui qui 
beneficie du ZIndex le plus eleve est affiche en dernier et est done toujours visible. En cas 
d'egalite des ZIndex, les elements sont affiches dans I'ordre de leur declaration. 



A noter qu'il existe d'autres proprietes dont : 

• la famille Stroke (voir la section « Le Stroke » du chapitre 8), pour specifier le contour 
de la figure (et notamment Stroke pour la couleur et StrokeThickness pour l'epaisseur 
de ce contour) ; 

• Cursor, pour indiquer la forme que prend le curseur lorsque la souris survole I'element 
(voir la section « Les curseurs » du chapitre 7). 

Voyons maintenant comment creer un rectangle ou une ellipse dans Expression Blend. Si 
ces elements n'apparaissent pas dans la boite d'outils d'Expression Blend, cliquez sur le 
composant affiche (I'ellipse ou le rectangle) et maintenez enfonce le bouton de la souris 
pendant une seconde. Selectionnez ensuite le composant souhaite qui s' affiche alors dans 
la boite d'outils (figure 5-2). 




Deplacer le rectangle et le redimensionner est un jeu d'enfant dans la surface de travail 
d'Expression Blend (figure 5-3). En cliquant pres de l'un des coins du rectangle, une 
fleche en forme d'arc de cercle s'affiche, permettant d'incliner, voire de faire tourner le 
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rectangle. Une transformation de type RotateTransform (voir la section « Les transforma- 
tions » du chapitre 9) est alors appliquee au rectangle. Vous pouvez aussi utiliser le 
panneau de droite pour modifier les caracteristiques du rectangle ou de 1' ellipse. 





Pour tracer un carre ou un cercle, maintenez simplement la touche Maj enfoncee lors des 
redimensionnements a l'aide de la souris afin de conserver les proportions. 



Les zones d'affichage (TextBlock) 

La balise TextBl ock permet d'afficher du texte, celui-ci etant specifie dans l'attribut Text. 
II n'est pas necessaire de specifier Width et Height (la zone d'affichage s'etend automati- 
quement) bien que cela soit possible : le texte est alors limite au rectangle (Width, Height) 
et ne s'affiche pas en dehors de celui-ci. II est neanmoins possible d'afficher le texte sur 
plusieurs lignes a l'interieur du rectangle. Pour cela, il suffit d'initialiser la propriete 
TextWrapping a Wrap, le rectangle servant alors d'enveloppe au texte. 
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Par ailleurs, les lettres du texte sont peintes avec la couleur (plus precisement le pinceau) 
specifiee dans la propriete Foreground. II peut s'agir d'une couleur avec degrade (lineaire 
ou radial), d'une image ou encore d'une video (celle-ci etant alors jouee a l'interieur des 
lettres). 

Les caracteristiques de la police sont specifiers dans les proprietes FontFamily, FontSize, 
FontStretch, FontStyle, FontHeight (voir la section suivante) mais aussi TextDecorations 
(qui peut contenir la chaine Underl ine pour forcer un soulignement) et TextWrapping. 

Par exemple : 

<TextBlock Text="Hello Silverlight" /> 

Decomposer un texte en plusieurs parties 

Un texte peut etre divise en plusieurs parties, chacune d'elles comportant des attributs de 
presentation differents. Pour cela, il faut utiliser : 

• la balise Run pour forcer une division de texte (avec attributs de presentation propres a 
cette section) ; 

• la balise LineBreak pour provoquer un saut de ligne. 

L' exemple de code suivant affiche un texte sur deux lignes, en bleu, en blanc et en rouge, 
avec un espace entre Al 1 ez et 1 a : 



<Run Foreground="Bl ue">Al 1 ez</Run> 
<Run Foreground="White" FontSize="15">la</Run> 
<LineBreak /> 
<Run Foreground="Red" FontSize="12">France</Run> 
</TextBlock> 

Au lieu d'utiliser les balises precedentes, ce code pourrait egalement s'ecrire : 

<TextBlock FontSize="12"> 

<Run Foreground="Red" Text="Allez" /> 

<Run Foreground="Bl ack" FontSize="15" Text=" la " /> 

<LineBreak/> 

<Run Foreground="Green" FontSize="12" Text=" France" /> 

</TextBlock> 

Cette syntaxe rend plus aise l'ajout d'espaces, non pris en compte dans l'exemple prece- 
dent au-dela de l'unique espace de separation. 

Si la balise TextBlock contient un attribut Text, son contenu est affiche avant le texte 
specifie dans les balises Run. 

Lors de 1' initialisation par programme de la propriete Text d'une zone d'affichage, ajou- 
tez l'attribut Envi ronment . NewLi ne pour provoquer un saut de ligne, ce qui presente l'avan- 
tage d'etre independant de la plate -forme d'execution du programme Silverlight. 



<TextBlock 



FontSize="12"> 
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Par exemple (za designant le nom interne d'une zone d'affichage) : 

za.Text = "Hello" + Envi ronment.NewLine + "Silverlight"; // syntaxe C# 

ou 

za.Text = "Hello" & Environment. NewLine & "Silverlight" ' syntaxe VB 

Les effets de relief 

II est possible de creer des effets de relief (de preference sur un fond gris comme 
LightGray mais d'autres combinaisons seraient possibles) en combinant astucieusement 
position du texte et couleurs. 

Pour « graver » du texte, affichez tout d'abord le texte en blanc a partir du point (x + 1, 
y + 1) puis en noir a partir de (x, y) : 

<TextBlock Canvas. Left="101" Canvas .Top="101" Foreground="White" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !"/> 

<TextBlock Canvas. Left="100" Canvas .Top="100" Foreground="Bl ack" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !"/> 

Pour le faire ressortir, affichez tout d'abord le texte en blanc en (x - 1, y — 1), puis en gris 
en (x + 1, y + 1) et finalement en blanc en (x, y) : 

<TextBlock Canvas. Left="199" Canvas .Top="199" Foreground="White" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !"/> 

<TextBlock Canvas. Left="201" Canvas .Top="201" Foreground="Gray" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !"/> 

<TextBlock Canvas. Left="200" Canvas .Top="200" Foreground="Bl ack" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !"/> 

Dans une cellule de grille, cet effet est obtenu en passant par Horizontal Al ignment, Verti - 
calAlignment et Margin comme indique precedemment ou en modifiant comme suit les 
balises : 

<TextBlock Foreground="White" Grid.Row="l" Grid.Column="l" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !"> 
<TextBl ock. RenderTransf orm> 
<TranslateTransform X="-l" Y="-l" /> 
</TextBl ock. RenderTransf orm> 
</TextBlock> 

<TextBlock Foreground="Gray" Grid.Row="l" Grid.Column="l" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !"> 
<TextBl ock. RenderTransf orm> 
<TranslateTransform X="l" Y="l" /> 
</TextBl ock. RenderTransf orm> 
</TextBlock> 

<TextBlock Foreground="Bl ack" Grid.Row="l" Grid.Column="l" 

FontFamily="Verdana" FontSize="40" Text ="Hello Silverlight !" /> 
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Nous pourrons realiser des effets plus saisissants encore lorsque nous aborderons les 
transformations et animations au chapitre 9. 

Dans Expression Blend, TextBlock (zone d'affichage) et TextBox (zone d'edition) font 
partie de la meme famille. Cliquez done sur le bouton correspondant dans la boite 
d'outils (figure 5-4) pour selectionner l'outil TextBox ou TextBlock (maintenez le bouton 
de la souris enfonce pendant une seconde pour selectionner l'un ou 1' autre). 

Figure 5-4 




Dans le panneau de droite (figure 5-5), vous pouvez specifier les caracteristiques d'affi- 
chage (libelle, alignements, marges, etc.). Les attributs XAML que nous venons d'etudier 
sont ainsi generes par Expression Blend. 

Figure 5-5 
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Les polices de caracteres 

Meme si les polices de caracteres ne font pas partie des composants d'interface visuels, 
nous les presentons ici en raison de leur role dans les zones d'affichage mais aussi dans 
la plupart des elements UI (libelle des boutons mais aussi de bien d'autres composants). 

Les polices fournies avec Silverlight 

Pour afficher du texte autrement qu'avec ses attributs de police (font en anglais) par 
defaut, il suffit de specifier des valeurs pour les attributs de la famille Font. Par defaut, 
la police (attribut FontFamily) est Lucida Sans Unicode, Lucida Grande (aussi appelee 
Portable User Interface), avec la valeur FontSize (taille) egale all points, soit 14,66 pixels. 

Le tableau 5-2 presente les differentes proprietes des polices de caracteres. 



Tableau 5-2 - Les proprietes des polices de caracteres 



Nomde I'attribut 


Description 


FontFami ly 


Nom de la police. Plusieurs noms de polices (separes par des virgules) peuvent etre speci- 
fies. Les polices nativement supportees sont An" al , An" al Bl ack, Comi c Sans MS, Courier 
New, Georgia, Lucida Grande/Lucida Sans Unicode, Times New Roman, Trebuchet MS 
et Verdana (voir figure 5-6). 


FontSize 


Hauteur des caracteres en pixels. 


FontStretch 


Une des valeurs de I'enumeration FontStretches indiquant la compression ou I'expansion 
des caracteres : Condensed, Expanded, ExtraCondensed, Extra Expanded, Medi urn, Normal, 
SemiCondensed, Semi Expanded, Ul traCondensed et Ul traExpanded. 


FontStyl e 


Une des valeurs de I'enumeration FontStyl es specifiant I'inclinaison des caracteres : 
Ital ic, Normal et Obi ique. 


FontWeight 


Une des valeurs de I'enumeration FontWei ghts indiquant la graisse (ici, du tres fonce au tres 
Clair) : Black, Bold, DemiBold, ExtraBlack, ExtraLight, Heavy, Light, Medium, Normal, 
Regular, Semi Bold, Thin, UltraBlack, UltraBold et Ultra Light. 



Normal est la valeur par defaut pour les trois derniers attributs. 

La figure 5-6 presente le nom des polices fournies avec Silverlight, affiches dans les polices 
correspondantes. 

Figure 5-6 

Arial Arial Black Comic Sans MS Courier New 

Georgia Par defaut Times New Roman Trebuchet Verdana 



Une premiere serie de composants 




Chapitre 5 



Afficher un texte dans une police non fournie avec Silverlight 

Pour afficher du texte dans une police non fournie avec Silverlight, il faut disposer du 
fichier .ttf de cette police. D'innombrables polices (fichiers .ttf) peuvent etre telechar- 
gees sur Internet, souvent gratuitement. Pour connaitre le nom de la police contenue dans 
un fichier .ttf, il suffit de double-cliquer sur le nom du fichier a partir de l'Explorateur 
de fichiers. Dans le cas de notre seconde application Web, nous allons incorporer la 
police Scriptina contenue dans le fichier Scriptln.ttf, librement telechargeable a partir 
du site de Smashing Magazine, http://www.smashingmagazine.com/ 

Ajoutez tout d'abord le fichier Scriptln.ttf au projet de 1' application. Pour cela, dans 
l'Explorateur de solutions, effectuez un clic droit sur le nom du projet Silverlight puis 
selectionnez Ajouter>Element existant. Localisez ensuite sur votre ordinateur le fichier 
d'extension .ttf souhaite. Celui-ci sera ensuite copie dans le repertoire du projet et figu- 
rera parmi les elements faisant partie du projet. 

Cet element de projet doit etre inclus en ressource (il sera ainsi ajoute au fichier d'exten- 
sion .xap envoy e au client avec la page Web). Pour cela, effectuez un clic droit sur le 
fichier .ttf puis selectionnez Proprietes>Action de generation>Resource. 

Ca n'est pas plus complique ! II suffit a present de modifier l'attribut Font dans la balise 
de l'element visuel de la maniere suivante : 



La figure 5-7 presente le resultat obtenu. Cette operation augmente certes la faille du 
fichier d'extension .xap transmis au client mais de quelques dizaines de Ko seulement, 
soit guere plus qu'une image, meme en basse definition. Cela est du notamment au fait 
que le fichier XAP est un fichier compresse (avec compression ZIP). 



Une zone d'edition (objet TextBox) permet de saisir du texte sur une ou plusieurs lignes 
(voir l'attribut AcceptsReturn pour cette derniere possibilite). L' application Silverlight 
peut lire son contenu (propriete Text), initialiser celui-ci ou encore selectionner du texte 



<TextBl ock Text="Pol i ce Scriptina" FontSize="50" . 

FontFamily="ScriptIn.ttf#Scriptina" /> 



Figure 5-7 




Les zones d'edition (TextBox) 
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dans ce contenu ou lire la partie de texte selectionnee par l'utilisateur. Les operations de 
couper-coller sont done possibles. 

Nous ne reviendrons pas sur les attributs Background (couleur de fond), Foreground (couleur 
d'affichage), ceux de la famille Font et les attributs HorizontalAl ignment et Vertical - 
Al i gnment qui indiquent l'alignement de la zone d'edition dans un conteneur comme une 
cellule de grille ou un StackPanel. Les attributs Width et Height seront egalement ignores 
ici. 

Le tableau 5-3 presente un certain nombre de proprietes (notamment celles liees a la 
selection de texte) presentant un interet en cours d'execution de programme seulement. 



Tableau 5-3 - Les proprietes des zones d'edition 



Norn de I'attribut 


Description 


AcceptsReturn 


Si cette propriete vaut true (ce qui est le cas par defaut), la zone d'edition peut s'etendre 
sur plusieurs lignes (la touche Entree permet de forcer un saut de ligne). 


BorderBrush 


Pinceau (done couleur) utilise pour dessiner la ligne de contour. Par exemple : 
BorderBrush = "Red" 


BorderThickness 


Epaisseur du contour autour de la zone d'edition. Aucun contour n'est affiche si Border- 
Thi ckness vaut 0 (la valeur par defaut est 1). 


IsReadOnly 


L'utilisateur ne peut pas modifier le contenu de la zone d'edition si IsReadOnly vaut true 
(false par defaut). 


IsTabStop 


Si cetattributa f al se pour valeur (true est la valeur par defaut), il n'y a pas d'arret sur 
cette zone d'edition lors d'une navigation de composant a composant par la touche Tab. 


Padding 


Par defaut, le contour borde au plus pres le contenu de la zone d'edition ou s'ajuste sur 
Wi dth et Hei ght. Paddi ng permet d'ajouter une marge entre la zone d'edition et la bor- 
dure. Une, deux ou quatre valeurs peuvent etre specifiers, comme pour Margin (voir la 
section « La grille » du chapitre 3). Paddi ng correspond a un espacement a I'interieur de 
la bordure tandis que Margin correspond a un espacement a I'exterieur du composant. 
Par exemple : 


Padding="10" 10 pixels sont ajoutes a chaque bord. 


Paddi ng="10 . 5" 10 pixels sont ajoutes a gauche et a droite et 5 pixels sont ajou- 
tes au-dessus et au-dessous. 


Sel ectedText 


Texte selectionne soit par l'utilisateur (par I'operation usuelle de selection de texte a I'aide 
de la souris ou du clavier), soit par du code (a I'aide de la fonction Sel ect appliquee a 
la zone d'edition). 


SelectionBac kg round 


Couleur de fond du texte selectionne. 


SelectionLength 


Nombre de caracteres du texte selectionne. 


SelectionStart 


Deplacement (0 pour le premier) du premier caractere de la zone de selection. 


Tablndex 


Ordre de passage sur la zone d'edition lors d'une navigation (passage d'un element Ul a 
I'autre) par la touche Tab. 


Text 


Contenu de la zone d'edition. 


TextAl ignment 


Alignement du texte dans la zone d'edition. Les valeurs possibles sont Left (valeur 
par defaut), Center et Right. 
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Tableau 5-4 - Les evenements relatifs aux zones d edition 



Nom de I'evenement 


Description 


Sel ecti onChanged 


Evenement signale aussitot qu'une selection de texte demarre ou est modifiee. 


TextChanged 




Evenement signale aussitot que le contenu de la zone d'edition est modifie (voir la section 
« Les evenements » du chapitre 6 pour le traitement des evenements). 



Une zone d'edition destinee a recevoir un mot de passe est obtenue en attribuant la meme 
couleur a Background et Foreground (ce qui presente l'avantage d'empecher tout curieux 
d'estimer le nombre de caracteres du mot de passe). 



Les boutons 

Nul besoin de presenter le bouton de commande puisqu'il s'agit du plus connu des 
composants et cela depuis les premiers programmes Windows il y a un quart de siecle. 
Nous verrons au chapitre 6 comment traiter le clic sur le bouton (evenement CI i ck) et au 
chapitre 15, comment personnaliser un bouton de commande. A ce stade de l'etude, nous 
nous contenterons d'un simple libelle. 

On retrouve dans une balise Button des attributs desormais familiers : Background, Fore- 
ground, ceux de la famille Font, Width, Height, Margin, Padding, etc. 

Le tableau 5-5 presente les proprietes propres aux boutons. 



Tableau 5-5 - Les proprietes des boutons 



Nom de I'attribut 


Description 


CI ickMode 


Indique a quel moment I'evenement Click est signale (et peut des lors etre traite par pro- 
gramme) : 




Hover 


Quand la souris survole le bouton (plus precisement lorsqu'elle entre dans la sur- 
face du bouton). 




Press 


Au moment ou le bouton est enfonce. 




Rel ease 


Au moment ou le bouton est relache. II s'agit bien sur de la valeur par defaut. Les 
deux autres valeurs (et surtout la premiere) ne peuvent mener qu'a une utilisa- 
tion atypique susceptible de desorienter les utilisateurs. 


Content 


Libelle du bouton. Par defaut, il s'agit d'un texte mais le libelle peut prendre une forme bien 
plus complexe (voir la personnalisation des boutons au chapitre 15). 



A noter que I'evenement CI ick signale que l'utilisateur a clique sur le bouton. 
Pour un bouton place dans une cellule d'une grille, la balise peut etre aussi simple que : 
<Button Content="G0" /> 
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Voici a quoi ressemble le code suite a l'ajout de couleurs et a la specification de la taille : 

<Button Content="G0" Foreground="Red" Background="Si 1 ver" 
FontSize="20" Width="100" Height="80" /> 

II est egalement possible d'ajouter une info-bulle (affichee quand la souris survole le 
bouton) : 

<Button ToolTipService.ToolTip="Ceci est une aide sur GO" /> 

L'attribut Content peut etre redefini pour modifier considerablement l'apparence du 
bouton. Celui-ci (cas simple) pourrait contenir une image ou une video. Nous etudierons 
la personnalisation des boutons au chapitre 15, oil nous aborderons les templates qui 
permettent une modification complete de l'apparence (et surtout, a destination des 
graphistes, Expression Blend avec sa technologie Visual State Manager). 

Grace aux connaissances acquises jusqu'a present, vous pouvez deja personnaliser quel- 
que peu (si peu au regard de ce qui est possible) le bouton. Dans l'exemple de code 
suivant, le contenu d'affichage du bouton est insere dans une grille limitee a une seule 
cellule : 

<Button FontSize="20" Width="100" Height="80" 
Grid.Row="l" Grid. Col um="l"> 
<Button .Content> 
<Grid> 

<Ellipse Fill="IndianRed" Width="60" Height="40"/> 
<TextBlock Text="G0" VerticalAl ignment="Center" 
HorizontalAl ignment="Center" /> 

</Grid> 
</Button.Content> 
</Button> 

La figure 5-8 illustre le resultat obtenu. 
Figure 5-8 



GO 



La boite a outils de Silverlight propose deux variantes du bouton : le RepeatButton et le 
Toggl eButton. 

Voyons en quoi elles different du bouton « normal ». Tout d'abord, celui-ci genere 
l'evenement Click lors du relachement du bouton (evenement MouseLeftButtonUp). Le 
bouton RepeatButton, quant a lui, genere l'evenement Click a intervalles tres rapproches 
tant que l'utilisateur garde le bouton de la souris enfonce. Le tableau 5-6 presente les 
deux attributs propres aux boutons RepeatButton. 
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Tableau 5-6 - Les proprietes propres aux boutons RepeatButton 



Norn de I'attribut 


Description 


Delay 


Delai (en millisecondes) entre le die (evenement MouseButtonDown) et la generation du pre- 
mier evenement Click. Par defaut, cette valeur est de 250 millisecondes. 


Interval 


Duree (en millisecondes) entre deux evenements CI i ck (tant que le bouton de la souris reste 
enfonce). Par defaut, cette valeur est de 250 millisecondes. 



Par ailleurs, le bouton Toggl eButton garde son etat visuel apres relachement. La propriete 
booleenne IsChecked donne l'etat du bouton a un moment donne. Sans personnalisation 
du bouton (voir chapitre 15), la difference est malheureusement peu perceptible au 
niveau visuel. 



Creer un bouton dans Expression Blend 

Creer et modifier un bouton a l'aide d'Expression Blend est un jeu d'enfant. Si l'icone du 
bouton n'est pas visible dans la boite d'outils, cliquez sur l'icone symbolisee par des 
chevrons fermants (ici, dans la partie inferieure de la boite d'outils) et maintenez enfonce 
le bouton de la souris pendant une seconde. 

Le tableau des composants susceptibles d'etre utilises apparait alors (figure 5-9). Selec- 
tionnez le bouton, inserez-le dans la surface de travail (par un clic dans la boite d'outils 
suivi d'un autre dans la surface de travail) et modifiez ses proprietes dans le panneau des 
proprietes d'Expression Blend (panneau de droite). 



Figure 5-9 
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Les cases a cocher (CheckBox) 

Les cases a cocher sont aussi trop connues pour etre presentees longuement et dans le 
detail. Disons simplement qu'elles peuvent etre a deux ou trois etats : 

• deux etats : etat Checked (case cochee) et Unchecked (case non cochee) si la propriete 
IsThreeState vaut false (valeur par defaut), 

• trois etats : les deux etats precedents ainsi qu'un etat dit indetermine si la propriete 
IsThreeState vaut true. 

Le tableau 5-7 presente les proprietes propres aux cases a cocher. 



Tableau 5-7 - Les proprietes des cases a cocher 



Nom de I'attribut 


Description 


Cl i ckMode 


Voir I'attribut Cl ickMode (avec ses valeurs Hover, Press et Rel ease) des boutons presen- 
ts au tableau 5-5, avec la reserve qui a ete emise concernant une utilisation non standard. 


IsChecked 


Indique si la case est cochee ou non (true ou f al se). 


IsEnabl ed 


Indique si la case est activable ou non (I'utilisateur ne peut pas modifier I'etat de la case si 
IsEnabled a false pour valeur). 


Content 


Libelle de la case. 


IsThreeState 


Indique s'il s'agitd'une case a trois etats (true ou fal se). 


Tableau 5-8 - Les evenements lies aux cases a cocher 


Nom de I'evenement Description 


Checked 


Evenement signale quand la case passe a I'etat « case cochee ». 


Indeterminate 


Evenement signale quand la case passe a I'etat « indetermine ». 


Unchecked 


Evenement signale quand la case passe a I'etat « case non cochee ». 



Le traitement des evenements est presente au chapitre suivant. 

Les boutons radio (RadioButton) 

Un bouton radio fait generalement partie d'un groupe (attribut GroupName, de type chaine 
de caracteres). Un seul bouton radio du groupe peut etre coche a un moment donne (celui 
pour lequel IsChecked vaut true). Tout clic sur un bouton a pour effet de le cocher et de 
decocher le bouton qui etait coche auparavant. 
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Par exemple : 

<RadioButton x:Name="rbCelibataire" Content="Cel ibatai re" 
GroupName="EtatCivil " IsChecked="true" /> 
<RadioButton x:Name="rbMarie" Content="Marie" 

GroupName="EtatCi vi 1 "/> 
<RadioButton x:Name="rbDivorce" Content="Divorce" 

GroupName="EtatCi vi 1 "/> 
<RadioButton x: Name="rbVeuf " Content="Veuf " 
GroupName="EtatCivil "/> 

La figure 5-10 illustre le resultat obtenu. 
Figure 5-10 

® Celibataire 
Q Marie 
Q Divorce 
O Veuf 



Les boutons hyperliens 

Ce composant, qui permet de naviguer d'une page Web a une autre, est lui aussi d'une 
simplicite enfantine et a le meme effet que la balise <a> du HTML (l'apparence du 
composant Silverlight peut neanmoins etre complete ment rede time). 

Le tableau 5-9 presente les proprietes propres aux boutons HyperlinkButton. 



Tableau 5-9 - Les proprietes des boutons HyperlinkButton 



Nom de I'attribut 


Description 


Content 


Libelle du lien. 


NavigateUri 


URL du site de redirection. 


TargetName 


Si cet attribut vaut _bl ank, la nouvelle page Web sera affichee dans une autre page (par 
defaut, la nouvelle page remplace la page existante). 


Tooltip 


Contenu de I'info-bulle affichee quand la souris marque I'arret au-dessus du composant. 



Par exemple : 

<Hyperl inkButton Content="Sil verl ight" 
Tool Ti pServi ce . Tool Ti p 

="Vers le site Microsoft de Silverlight" 

NavigateUri="http: //si 1 verl ight.net" 

TargetName="_bl ank" /> 
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La figure 5-11 illustre le resultat obtenu. 
Figure 5-1 1 

Silverlight 



Vers le site Microsoft de Silverlight 



Le composant Slider 

Le composant SI ider permet de selectionner une valeur (comprise entre Minimum et Maxi - 
mum) en faisant glisser un curseur a l'aide de la souris. 

Le tableau 5-10 presente les proprietes propres au composant SI ider. 

Tableau 5-10 - Les proprietes du composant Slider 



Norn de I'attribut 


Description 


IsDi recti on Reversed 


Si cette propriete vaut true, les plus petites valeurs sont situees a droite (quand Orien- 
tation vaut Horizontal) ou en bas (quand Orientation vaut Vertical). La valeur 
par defaut est false. 


LargeChange 


Valeur decrementation ou de decrementation du curseur, lorsque I'utilisateur clique sur 
la barre. 


Orientation 


Orientation : Horizontal (valeur par defaut) ou Vertical. 


Maximun 


Valeur maximale, de type doubl e (avec 0 comme valeur par defaut). 


Minimum 


Valeur minimale, de type doubl e (avec 10 comme valeur par defaut). 


Value 


Valeur correspondant a la position du curseur, entre Minimum et Maximum. 





A noter que l'evenement Val ueChanged est signale quand le curseur est deplace. 

Par exemple : 

<Slider x:Name="sl ider" Minimum="l" Maximum="100" 
LargeChange="10" Width="200" Height="20" 
Val ueChanged="sl ider_Val ueChanged" /> 
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La figure 5-12 illustre le resultat obtenu. 
Figure 5-12 

Q — 



Les attributs Width et Height doivent etre specifies car, sinon, le Slider se comporte 
comme un panneau et occupe toute la largeur et toute la hauteur de la fenetre du navi- 
gateur. 

La fonction sliderJ/alueChanged est automatiquement executee lorsque l'utilisateur 
deplace le curseur. Dans cette fonction de traitement, slider. Value donne la valeur 
correspondant au curseur (ici, entre 1 et 100). 

Ces proprietes peuvent etre initialisees dans le panneau de droite d' Expression Blend 
(figure 5-13). 

Figure 5-13 
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La barre de defilement (ScrollBar) 

La barre de defilement ScrollBar (figure 5-14) permet de selectionner une valeur, tout 
comme on le fait avec un SI i der. 

Figure 5-14 



Ses proprietes peuvent egalement etre initialisees dans le panneau de droite d'Expression 
Blend (figure 5-15). 



Figure 5-15 



Miscellaneous 

Clip 
IsEnabled 1 
LargeChange 1 
Maximum 10 
Minimum 0 



Orientation Horizontal 



RenderTransformOrigin 0:0 

SmallChange 0.1 
Style 

TabNavigation Local 
Template 
ToofTip 

Value 0 



A la section « Modifier n'importe quel controle avec Expression Blend » du chapitre 15, 
nous verrons comment modifier avec Expression Blend n'importe quel sous-element de 
la barre de defilement, par exemple le curseur. 
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Le calendrier (Calendar) 

Le composant Cal endar affiche un calendrier et permet a l'utilisateur de selectionner une 
date ou une periode. Par defaut, la date du jour est preselectionnee. 

Comme c'est le cas pour le GridSpl itter (voir la section « Le GridSplitter » du chapi- 
tre 3), le code du calendrier ne fait pas partie du run-time Silverlight. A la suite d'un 
glisser-deposer de la boite d'outils vers la fenetre du code XAML, Visual Studio ajoute 
le code suivant : 

xmlns:my="clr-namespace: System. Windows. Control s;assembly=System. Windows. Controls. Extended" 
qui signifie : 

• le composant Calendar fait partie de l'espace de noms System. Windows. Controls ; 

• son code se trouve dans la DLL Sy s tern. Wi ndows. Cont rol s. Extended. dl 1 qui sera greffee 
au fichier XAP et ainsi transmise avec le code de 1' application au navigateur ; 

• il faut prefixer Cal endar de my: (vous pouvez choisir un autre prefixe, il suffit de modi- 
fier l'attribut xmlns:my) pour faire reference au composant Calendar dans les balises 
XAML. 

La figure 5-16 represente un exemple de calendrier. 
Figure 5-16 
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L'utilisation du calendrier est intuitive et trap connue pour s'y attarder. Passons done 
directement a ses proprietes (tableau 5-11). 

A noter que l'evenement DateSel ected est signale quand l'utilisateur selectionne une date 
(par un clic). 

Toutes ces proprietes peuvent etre initialisers dans le panneau de droite d'Expression 
Blend. 
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Tableau 5-11 - Les proprietes du composant Calendar 



Norn de l attribut 


Description 


Sel ectedDate.HasVal ue 


Booleen qui indique si I'utilisateur a selectionne une date . 


Sel ectedDate 


Propriete de type DateTime qui indique la date selectionnee. 


Di spl ayDate 


Par defaut, Silverlight affiche initialement le mois de la date du jour. En initialisant 
Di spl ayDate (de type DateTime), un autre mois peut etre affiche. 


Di spl ayDateStart 
DisplayDateEnd 


Proprietes de type DateTime qu'il est toujours plus prudent d'initialiser par pro- 
gramme pour des raisons de formats de dates (fort differents d'une region a I'autre du 
monde). Par defaut, toutes les dates peuvent etre selectionnees. Di spl ayDateStart 
et Di spl ayDateEnd permettent de specifier un intervalle de dates en dehors duquel 
les dates ne sont pas affichees, ce qui limite automatiquement le choix de la date : 
cal .DisplayDateStart = new DateTime(2008, 12. 25); 


Selectabl eDateStart 
Sel ectabl eDateEnd 


Si ces dates sont specifiers, I'utilisateur ne peut pas selectionner une date en dehors 
de cette periode. 



Le composant DatePicker 

Ce composant permet de saisir une date, soit dans une zone d'edition, soit en la selection- 
nant dans un calendrier. II peut done apparaitre de deux manieres a I'utilisateur (figu- 
res 5-17 et 5-18). II sufrit de cliquer sur l'icone en forme de calendrier pour passer d'une 
representation a I'autre. 

Figure 5-17 
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L'affichage, ainsi que le format de la date, s'adapte automatiquement aux caracteristiques 
regionales de l'utilisateur. 

Son code fait partie de la meme DLL que Cal endar. Dans une balise, il faut done prefixer 
DatePicker de my (prefixe par defaut). 

On retrouve les memes proprietes que pour Cal endar. 

Le composant DatePickerTextBox (de la meme famille) correspond a une zone d'edition 
de saisie de date. 
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Les evenements 

La notion d'evenement 

Lors d'un clic sur un bouton, d'une frappe sur une touche, du chargement de la page dans 
le navigateur, d'un clic de la souris, lorsque celle-ci se deplace ou survole un composant 
(plus precisement lorsqu'elle entre ou sort de la surface occupee par le composant), etc., 
done « lorsque quelque chose se passe », le run-time Silverlight vous en informe en 
appelant une fonction (dite de traitement) de votre programme. 

II n'y a la rien de nouveau pour ceux qui ont deja pratique la programmation Windows. 
La technique devient maintenant applicable aux pages Web, ce qui rend possible la crea- 
tion d' applications Web aussi conviviales et interactives que les applications Windows ! 

La fonction de traitement (ecrite en C# ou VB) est executee sur la machine client, dans le 
navigateur, sous controle du run-time Silverlight (autrement dit, sans pouvoir interferer 
avec les autres programmes et sans pouvoir acceder au systeme de fichiers, sauf la zone de 
stockage isole, comme nous l'expliquerons a la section « Le stockage isole avec Isolated- 
Storage » du chapitre 11). 

Dans cette fonction de traitement, vous avez acces a toutes les possibilites du C# ou de VB 
et pouvez utiliser les classes de l'environnement .NET, dont on sait qu'elles facilitent 
grandement la realisation des programmes. Ces classes, a quelques restrictions pres, 
sont celles qui sont utilisees en programmation Windows ou pour la programmation 
des mobiles. 
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Le fonctionnement sous Silverlight est tres different du fonctionnement des programmes 
Web sous ASP.NET ou PHP, type de programmation egalement appele programmation 
serveur. Ces programmes Web s'executent sur le serveur (par exemple, chez votre heber- 
geur) et generent du code HTML (contenant souvent du JavaScript) a partir des balises 
ASP.NET ou PHP incluses dans la page. Ces lignes de code HTML sont alors envoyees 
au navigateur du client, qui les interprete et en affiche le rendu dans la fenetre du navigateur. 

En programmation cote serveur, le navigateur (qui s' execute sur la machine client) 
informe le serveur (qui peut etre situe a des milliers de kilometres) qu'un bouton a ete clique. 
Une fonction (qui traite le clic sur le bouton) est alors executee sur le serveur. Comme 
celui-ci traite un grand nombre de requetes en provenance d'une multitude de clients, il 
n'est pas difficile d'imaginer l'impact sur ses performances. Impossible done de rivaliser 
avec les applications Windows. 

Generalement, cette fonction de traitement executee sur le serveur genere une nouvelle 
page (contenant du HTML, eventuellement du JavaScript, mais rien d' autre) qui est 
envoy ee au navigateur du client. Avec des techniques comme Ajax, il est cependant possi- 
ble de faire en sorte que cette fonction n'effectue que la mise a jour d'une partie de la page, 
ce qui ameliore deja les performances et l'interactivite. Mais rien encore de comparable 
avec les programmes Windows et maintenant les applications Silverlight. C'est pour 
cette raison (due au modele de la programmation serveur) qu'un programme ASP.NET 
ou PHP ne peut pas traiter des evenements comme MouseMove correspondant au deplace- 
ment de la souris. Cela serait possible en theorie mais en pratique, le delai de traitement 
ne serait pas raisonnable, sans compter de la charge additionnelle sur le trafic. 

Avec Silverlight, le traitement (a 1' exception des services Web qui sont deportes sur un 
serveur, voir chapitre 13) reste local, sur la machine du client. Ceci explique pourquoi 
une application Silverlight repond bien plus promptement aux sollicitations des utilisateurs, 
ce qui offre une interactivite inimaginable avec les programmes Web s' executant sur le 
serveur. 

Nous allons maintenant nous interesser aux evenements lies aux applications Silverlight. 

L'evenement Loaded 

L'un des premiers evenements signales a 1' application Silverlight est Loaded. II est signale 
quand la page Silverlight est chargee par le navigateur, avant meme qu'elle ne s' affiche a 
l'ecran. Traiter cet evenement donne l'occasion de peaufiner la page (avant son premier 
affichage) et de l'adapter au client, a l'environnement, au contexte, a l'heure, etc. 

Pour traiter un evenement, il faut lui associer une fonction de traitement. U existe plusieurs 
techniques pour cela, ce que nous verrons avec les evenements lies a la souris, exemples 
les plus parlants. Une fois la fonction (automatiquement generee par Visual Studio) asso- 
ciee a l'evenement, vous la retrouverez dans le fichier Page.xaml.es ou Page.xaml .vb, 
selon le langage choisi pour le developpement de 1' application. Dans l'Explorateur de 
solutions, ces fichiers se trouvent sous l'article Page . xaml . Cliquez sur le signe + en regard 
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de Page.xaml pour faire apparaitre le nom du fichier de code et double-cliquez sur celui-ci 
pour l'editer. 

Les evenements lies a la souris 

Quand le run-time Silverlight detecte un evenement lie a la souris, une fonction de 
l'application Silverlight (celle de traitement de l'evenement) est automatiquement executee, 
avec de 1'information additionnelle (propre a l'evenement en question) passee en arguments. 
Encore faut-il avoir signale que Ton desire traiter l'evenement en question. 

Le tableau 6-1 presentent les evenements lies a la souris et susceptibles d'etre traites pour 
chaque element UI (rectangle, zone d'afhchage, bouton, etc.). 



Tableau 6-1 - Les evenements lies a la souris 



Nom de l'evenement 


Description 


MouseMove 


La souris se deplace au-dessus de la surface de I'element UI. Le second argument de la 
fonction de traitement indique la position de la souris. Cet evenement est signale de 
maniere tres rapprochee tant que la souris est en mouvement. 


Mouse LeftButtonDown 


Le bouton de la souris vient d'etre enfonce (premiere phase du die). 


MouseLeftButtonUp 


Le bouton est relache (derniere phase du die). 


MouseEnter 


La souris entre dans la surface de I'element UI. 


MouseLeave 


La souris sort de la surface de I'element UI. 



Comment signaler le traitement d'un evenement ? 

Pour cela, il convient tout d'abord de nommer (attribut x : Name) I'element UI concerne par 
l'evenement. II est preferable de lui attribuer un nom qui designe clairement le compo- 
sant, ce qui facilitera le travail du programmeur mais aussi celui de la personne qui devra 
en assurer la maintenance (laisser des noms par defaut comme buttonl, button2, etc., 
devrait etre proscrit). 

Par exemple, pour ce rectangle rouge : 

<Rectangle x:Name="rcRouge" Fi 1 1 ="Red" /> 

La premiere technique pour traiter un evenement (ici, MouseMove) consiste a ajouter un 
attribut dans la balise de I'element UI : 

MouseMove = 

Des la saisie du signe = apres un nom d'evenement, Visual Studio propose de completer la 
balise et de construire automatiquement la fonction de traitement. II vous suffit d'appuyer sur 
la touche Tab une premiere fois (pour confirmer la generation automatique de la valeur de 
1' attribut) et puis une seconde fois (pour la generation automatique de la fonction de trai- 
tement). II est egalement possible de retenir une fonction existante comme fonction de 
traitement (celle-ci traite alors un meme evenement pour plusieurs elements UI). 



120 



Silverlight 2 



Le tableau 6-2 presente la balise automatiquement completee par Visual Studio ainsi que 
la fonction de traitement pour C# et VB automatiquement generee. 

Tableau 6-2 - Generation de la fonction de traitement par ajout d'un attribut 
XAML 

<Rectangle x:Name="rcRouge" MouseMove="rcRouge_MouseMove" /> 

Fonction de traitement C# automatiquement generee 

void rcRouge_MouseMove(object sender, MouseEventArgs e) 

{ 

// saisissez votre code de traitement ici 

[} 

Fonction de traitement VB automatiquement generee 

Private Sub rcRouge_MouseMove(ByVal sender As System. Object, _ 

ByVal e As System. Windows . Input .MouseEventArgs) 

' saisissez votre code de traitement ici 

End Sub 

En C#, Visual Studio genere une instruction throw dans le corps de la fonction de traite- 
ment mais vous pouvez supprimer cette ligne et la remplacer par votre propre code (en 
l'occurrence, ce que vous souhaitez executer comme instructions quand la souris se deplace 
au-dessus du rectangle rouge). 

En VB, vous pouvez reduire System. Windows. Input. MouseEventArgs a MouseEventArgs mais 
assurez-vous tout de meme que System. Windows . Input fait bien partie des Imports. 

Pour l'evenement MouseEnter, la fonction de traitement serait alors ici rcRouge_MouseEnter, 
et ainsi de suite pour les autres evenements. 

L' argument sender de la fonction de traitement indique l'objet qui a genere l'evenement. 
En raison de la propagation d' evenements (bubbling, voir plus loin), il ne s'agit pas 
necessairement de l'objet qui est a l'origine de l'evenement (celui-ci est donne par 
e. Source). Le second argument donne des informations sur l'evenement et est de type 
MouseEventArgs, derive de EventArgs, dans le cas de la souris. 

La seconde technique permettant de traiter un evenement consiste a l'associer par 
programme (en cours d'execution done) a une fonction de traitement du programme. 
Generalement, cette association est effectuee dans le constructeur de la classe Page (apres 
l'appel a InitializeComponent) ou dans la fonction traitant l'evenement Loaded (cette 
derniere solution etant preferable car on est alors sur que toutes les initialisations ont ete 
effectuees). 

En C#, il suffit de saisir rc.MouseMove += puis d'appuyer (a l'invitation de Visual Studio) 
deux fois sur touche Tab pour que Visual Studio complete la phrase et genere la fonction 
de traitement. En VB, e'est moins automatique mais deux solutions sont possibles 
(tableau 6-3). 
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Tableau 6-3 - Ajout dynamique d'une fonction de traitement 



rcRouge.MouseMove += new MouseEventHandler(rcRouge_MouseMove) ; 
VB 

Premiere solution : aucune instruction a executer mais une clause Handles doit etre ajoutee a la fonction de traite- 
ment (la fonction rcRouge_MouseMove devient ici la fonction de traitement de I'evenement MouseMove adresse a 
I'element rcRouge). 

Public Sub rcRouge_MouseMove(ByVal o As Object, ByVal e As MouseEventArgs) _ 
Handles rcRouge.MouseMove 

End Sub 

Deuxieme solution : executer I'instruction suivante (dans ce cas, pas de clause Handl es et on se rapproche de ce 
qu'il faut faire en C#) : 

AddHandler rcRouge.MouseMove, AddressOf rcRouge_MouseMove 

La fonction de traitement rcRougeJIouseMove sera automatiquement executee (elle est en 
fait appelee par le run-time Silverlight) quand la souris se deplacera dans les limites du 
rectangle rcRouge, exception faite des parties de ce rectangle qui seraient recouvertes par 
d'autres elements UI. Levenement MouseMove est signale, a intervalles tres rapproches, 
pour chaque deplacement elementaire de la souris. 

L' instruction suivante : 

rcRouge.MouseMove += new MouseEventHandler(rcRouge_MouseMove); 
automatiquement generee par Visual Studio, pourrait etre simplified et s'ecrire : 

rcRouge.MouseMove += rcRouge_MouseMove; 
mais autant s'en tenir au code automatiquement genere. 
Une fonction de traitement peut etre annulee a tout moment en executant : 

rcRouge.MouseMove -= rcRouge_MouseMove; 
en C#, et en VB : 

RemoveHandl er rcRouge.MouseMove, AddressOf rcRouge_MouseMove 

Pour information, I'instruction et la fonction de traitement precedentes pourraient egale- 
ment s'ecrire (ici, dans le constructeur de la classe Page, apres l'appel de la fonction 
Initial izeComponent) : 

MouseMove += delegate (object sndr, MouseEventArgs evt) 
{ 

} 

Les evenements lies a la souris (sauf MouseEnter et MouseLeave) sont reportes (bubbled en 
anglais) le long de la hierarchie enfant-parents done, ici, au conteneur du rectangle ainsi 
qu'a l'eventuel conteneur de ce conteneur (et ainsi de suite jusqu'au conteneur principal). 
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Autrement dit, vous pouvez traiter l'evenement MouseMove pour le rectangle (dans la fonc- 
tion rcRouge_MouseMove) mais aussi pour le conteneur (par exemple, dans LayoutRoot 
_MouseMove). La fonction rcRouge_MouseMove est d'abord executee, puis c'est au tour de la 
fonction LayoutRoot JlouseMove, dans laquelle l'argument e. Source indique quel element UI 
est concerne et ((FrameworkElement)e. Source). Name donne le nom de V element (ici, "rcRouge" 
ou "LayoutRoot"). On pourrait ecrire : 

FrameworkEl ement fe = e. Source as FrameworkElement; 

en C# , et en VB : 

Dim fe as FrameworkElement = e. Source 

puis acceder a fe.Name, qui indique, sous la forme d'une chaine de caracteres, le nom 
(attribut x: Name) de l'element concerne. 

Pour mettre fin a cette propagation, il suffit de passer le champ e . Handl ed du second argument 
a true. 

Comment detecter la position de la souris ? 

Le premier argument (appele sender) de la fonction de traitement indique quel element 
a genere l'evenement (sans oublier qu'a cause de la propagation, il ne s'agit pas neces- 
sairement de l'element qui en est a l'origine). Generalement, vous savez quel element 
est concerne puisque vous avez ecrit une fonction de traitement pour celui-ci (dans les 
exemples precedents, il s'agissait du rectangle rcRouge). Mais quand une meme fonc- 
tion traite un meme evenement pour plusieurs elements ou quand un meme evenement 
peut etre traite a differents niveaux (dans la hierarchie enf ant-parents, en tirant parti de 
la propagation d'evenements), il est necessaire de determiner l'element qui signale 
l'evenement. 

Le second argument de la fonction de traitement donne acces a diverses informations, 
notamment e. Source, qui designe l'element a l'origine de l'evenement mais aussi la posi- 
tion de la souris. 

Le tableau 6-4 presente les differents attributs possibles pour le second argument (de type 
MouseEventArgs) de la fonction de traitement. 



Tableau 6-4 - Les attributs du second argument de la fonction de traitement 



Nom de I'attribut 


Description 


GetPositiorKUI Element) 


La fonction GetPosition renvoie un objet de type Point qui donne les coordonnees 
de la souris, relativement a l'element UI passe en argument. 


Handled 


Valeur booleenne par laquelle on indique qu'un traitement a ete effectue. Si 
e. Handled passe a true, l'evenement n'est plus signale aux niveaux superieurs 
dans la hierarchie enfants-parents. 


Source 


Reference a l'element qui est a l'origine de l'evenement. 
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Prenons un exemple. Voici le code permettant d'afficher (dans un TextBl ock nomme zalnfo) 
la position de la souris dans le rectangle rc : 

<TextBlock x: Name="zaInfo" /> 

<Rectangle x:Name="rc" MouseMove="rc_MouseMove" /> 

En C#, cela donne : 

void rc_MouseMove(object sender, MouseEventArgs e) 
{ 

Point p = e.GetPosition(rc) ; 
zalnfo. Text = p.X + " - " + p.Y; 

} 

Et en VB : 

Public Sub rc_MouseMove(ByVal sender As Object, _ 
ByVal e As MouseEventArgs) 

Dim p As Point 
p = e.GetPosition(rc) 
zalnfo. Text = p.X & " - " & p.Y 
End Sub 

On aurait pu se passer de la declaration de la variable de type Point et ecrire directement : 
e.GetPosition(rc).X 

Pour determiner la position de la souris dans la page, l'argument de GetPosition aurait du 
etre thi s en C# et Me en VB. Une meilleure solution consiste a passer en argument le nom 
interne du conteneur (LayoutRoot pour le conteneur principal). 



Comment traiter le clic sur un bouton ? 

Considerons le code suivant (remplacez par d' autres attributs comme la position, la 

largeur, la hauteur, etc.) : 

<Button x:Name="bG0" Content="G0 !" /> 

et voyons comment traiter le clic sur le bouton (evenement CI i ck). 

Pour cela, en attribut de la balise Button, saisissez Click=. Comme pour n'importe quel 
evenement, Visual Studio propose de completer la balise et de generer automatiquement 
la fonction de traitement. Le nom de cette fonction sera ici bG0_Click et l'argument de 
type RoutedEventArgs. L' evenement Click n'est pas reporte au conteneur, bien que les 
evenements MouseLeftButtonDown et MouseLeftButtonUp sur le bouton le soient. 

Le seul champ de la classe RoutedEventArgs qui presente de l'interet (quand une meme 
fonction traite le clic pour plusieurs boutons) est Source, de type object. Celui-ci fait refe- 
rence au bouton sur lequel l'utilisateur a clique. II est generalement converti en un 
FrameworkElement, qui est la classe de base des elements UI. 
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En C#, cela donne : 

private void bG0_Cl ick(object sender, RoutedEventArgs e) 
{ 

} 

Et en VB : 

Private Sub bG0_Cl i ckCByVal sender As System. Object, _ 

ByVal e As System. Windows. RoutedEventArgs) 

End Sub 

Plusieurs boutons peuvent partager la meme fonction de traitement : 

<Button x:Name="bActionl" Content="Action 1" Click="bAction_Click" /> 

<Button x:Name="bAction2" Content="Action 2" Click="bAction_Click" /> 

En C#, cela donne : 

private void bAction_Cl ick(object sender, RoutedEventArgs e) 
{ 

FrameworkElement fe = e. Source as FrameworkEl ement ; 

// fe.Name contient le nom interne du bouton (ici, bActionl ou bAction2) 
if (e.Name == "bActionl") 

} 

Et en VB : 

Private Sub bAction_Cl ick(ByVal sender As System. Object, _ 

ByVal e As System. Windows. RoutedEventArgs) 
Dim fe As FrameworkElement = e. Source 

' fe.Name contient le nom interne du bouton (ici, bActionl ou bAction2) 
End Sub 

Ici, on aurait pu utiliser sender plutot que e. Source car l'evenement est traite au niveau 
meme de l'objet qui en est responsable et non a un niveau superieur dans la hierarchie 
enf ant-parents. 

Les evenements lies au clavier 

En ce qui concerne le clavier, il est possible de traiter les evenements presentes au 
tableau 6-5. 



Tableau 6-5 - Les evenements lies au clavier 


Nom de l'evenement 


Description 


KeyDown 


Enfoncement d'une touche. 


Key Up 


Relachement de la touche. 
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Ces evenements ne sont generalement traites que pour detecter la touche Entree et faire 
jouer a la frappe de cette touche le role du clic sur un bouton. 

Le second argument de la fonction de traitement est de type KeyEventArgs. Les champs 
Handled et Source ont deja ete abordes et ont la meme signification que pour les evenements 
lies a la souris. 

Le tableau 6-6 presente les champs de l'argument (de type KeyEventArgs) de la fonction 
de traitement. 



Tableau 6-6 - Les differents champs de l'argument 
(de type KeyEventArgs) de la fonction de traitement 


Norn du champ 


Description 


Key 


Code de la touche. La valeur de Key est I'une des valeurs de I'enumeration Key : Key . A a 
Key . Z (on retrouve uniquement les majuscules car aucune distinction n'est effectuee lors du 
traitement de I'evenement entre majuscule et minuscule), Key . Back, Key .Caps Lock (enclen- 
chement de majuscule), Key. Alt (Alt Gr), Key. Ctrl, Key. Escape, Key. Shift, Key. Home, 
Key. End, Key. Enter, Key. Space, KeyKey. Insert, Key. Left, Key. Top, Key. Right, 
Key. Down (touches de direction), Key. Add, Key. Multiply, Key. Divide, Key.NumPadO a 
Key . NumPad9 (pave numerique). 

Les touches de fonction (FO a F12) sont traitees par le navigateur avant que I'application Sil- 
verlight n'ait I'occasion de le faire. 


PI atformKeyCode 


Si e . Key a pris la valeur Key . Un known, cela signifie que la touche est propre a un systeme 
d'exploitation particulier. PI atformKeyCode contient alors un code propre a ce systeme. 


Source 


Element qui est a la base de I'evenement. II s'agit ici du composant qui a le focus au moment 
de la frappe. 



Souvent, il faut determiner si une action (a la souris, par exemple) a ete entreprise avec la 
touche Ctrl, ou Maj (shift en anglais), enfoncee. Pour cela, il suffit d'ecrire le code 
suivant (ici, pour la touche Ctrl) : 

if ((Keyboard. Modifiers & ModifierKeys. Control )!= 0) // touche Ctrl enfoncee 

oil & designe l'operateur « ET au niveau binaire ». Chacun des bits dans Keyboard. Modifiers 
va faire l'objet d'un ET binaire avec le bit correspondant dans ModifiersKey .Control . Si 
Tun au moins des bits du resultat vaut 1, cela signifie que la touche Ctrl est enfoncee. 

En VB, cette instruction s'ecrit : 

If (Keyboard. Modifiers And ModifierKeys. Control )<> 0 Then 

Les autres valeurs de I'enumeration ModifierKeys sont Alt, Apple, Control, None, Shift et 
Windows. 

Pour qu'une frappe sur la touche Entree ait le meme effet qu'un clic sur un bouton, 
I'evenement Key Up est traite et le code suivant est ajoute dans la fonction qui traite 
I'evenement KeyUp : 

| if (e.Key==Key. Enter) Trt(); 
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La fonction de traitement du clic sur le bouton n'est pas directement appelee. Son code 
est deporte dans une nouvelle fonction Trt. Ainsi, la fonction de traitement du clic mais 
aussi celle du KeyUp appellent maintenant cette fonction Trt. 

Le signal d'horloge (timer) 

Meme si la technique des animations (voir chapitre 9), introduite dans WPF et reprise avec 
quelques restrictions dans Silverlight (par exemple, pas de 3D), constitue une meilleure 
solution, le signal d'horloge (timer en anglais) est encore tres utilise, et ce depuis des 
lustres, pour realiser des effets d' animation. 

Pour creer une horloge (ce qui n'a ici aucune representation visuelle) signalant l'evene- 
ment Tick a intervalles reguliers, il faut : 

• declarer une variable (appelons-la timer) de type DispatcherTimer (cette classe fait 
partie de l'espace de noms System. Windows. Threading) dans la classe de la page Silver- 
light, en dehors des fonctions (pour que cette variable timer soit accessible a partir des 
differentes fonctions) ; 

• instancier cet objet, par exemple dans la fonction traitant l'evenement Loaded adresse 
au conteneur ; 

• specifier un intervalle de temps (par exemple, un dixieme de seconde) dans la propriete 
Interval , qui est de type TimeSpan ; 

• associer a ce timer une fonction de traitement de l'evenement Ti ck, laquelle etant auto- 
matiquement generee par Visual Studio lorsque vous saisissez timer. Tick += (il vous 
suffit alors d'appuyer sur la touche Tab pour confirmer la generation de la fonction) ; 

• demarrer le timer avec Start (et Stop pour l'arreter). 

Voyons comment specifier 1' intervalle de temps. Le constructeur de la classe TimeSpan 
peut accepter trois, quatre ou cinq arguments (soyez attentif au fait que le constructeur a 
quatre arguments fait intervenir les jours et non les millisecondes) : 

• TimeSpan( heures , minutes, secondes) ; 

• TimeSpan( jours , heures, minutes, secondes) ; 

• TimeSpan( jours , heures, minutes, secondes, millisecondes). 

L' exemple de code XAML suivant permet d'afficher l'heure (celle de la machine de 
l'utilisateur) dans la zone d'affichage dont le nom interne (attribut x: Name) est za : 

<UserControl x:Cl ass="SLProg. Page" 
xml ns="http: //schemas .microsoft.com/cl ient/2007" 
xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
Width="800" Height="600"> 

<Grid x:Name="LayoutRoot" Background="Beige" Loaded="LayoutRoot_Loaded"> 

<TextBlock x:Name="za M /> 
</Grid> 
</UserControl> 
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Ce qui donne en C# : 

namespace SLProg 
{ 

public partial class Page : UserControl 

{ 

public Paget) 
{ 

I n i tial izeComponent( ) ; 

} 

System.Windows.Threading.DispatcherTimer timer; 

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) 
{ 

timer = new System. Windows. Threading. DispatcherTimerO ; 
timer. Interval = new TimeSpan(0, 0, 1); // toutes les secondes 
timer. Tick += new EventHandler(timer_Tick); 
timer. StartO; // demarre le timer 

} 

void timer_Tick(object sender, EventArgs e) 
{ 

za.Text = DateTime.Now.ToLongTimeStringO; 

} 

} 

} 

Et en VB : 

Partial Public Class Page 
Inherits UserControl 
Public Sub NewO 

Initi al izeComponentt ) 
End Sub 

Private timer As System. Windows. Threading. DispatcherTimer 
Private Sub LayoutRoot_Loaded(ByVal sender As System. Object, _ 
ByVal e As System. Windows. RoutedEventArgs) 

timer = New System. Windows. Threading. DispatcherTimerO 

timer. Interval = New TimeSpanCO, 0, 1) 

AddHandler timer. Tick, AddressOf timer_Tick 

timer. Startt ) 
End Sub 

Private Sub timer_Tick(ByVal sender As Object, _ 

ByVal e As EventArgs) 
za.Text = DateTime.Now.ToLongTimeStringO 
End Sub 
End Class 

Au chapitre 9, consacre aux transformations et aux animations, nous ameliorerons ce 
programme en creant une veritable horloge, avec aiguilles en rotation. 
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Exemple de traitement d'evenement 

Pour illustrer le traitement d'un evenement, nous allons realiser un menu simple mais 
utile (figure 6-1). Une information complementaire sur 1' article de menu (une sorte de 
tooltip) sera affichee des que la souris survolera 1' article et le curseur de la souris prendra 
alors la forme d'une main. Un article selectionne sera affiche en rouge (le reste de la page 
Silverlight, non represents ici, sera alors en rapport avec cet article). 



Figure 6-1 
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Le menu est realise a l'aide d'un panneau vertical occupant toute la largeur de la page et 
accole au bord superieur de la fenetre. Ce panneau vertical contient deux articles : la 
ligne de menu (en fait un panneau horizontal) et la ligne d'aide. Les articles du menu, 
ainsi que les barres de separation verticales, sont inclus dans un panneau a orientation 
horizontal. Chaque article du menu est un TextBl ock. Pour chaque article, les evenements 
MouseEnter (pour afficher la ligne d'aide), MouseLeave (pour l'effacer) et MouseLeftButtonUp 
(pour la selection d' articles) sont traites. Les fonctions de traitement sont communes a 
tous les articles. 

Dans le code XAML suivant, les articles sont codes « en dur ». Dans la pratique, il faudrait 
en faire un « controle utilisateur » (voir chapitre 14) avec les donnees qui proviennent 
d'un fichier XML (voir chapitre 12). 

Le StackPanel repris ci-dessous doit etre insere dans le conteneur de la page Silverlight. 

<StackPanel Horizontal Al ignment=" St retch" Verti cal Al ignment=°Top" 
Background="DodgerBl ue" > 
<StackPanel Orientation="Horizontal " Height="50" Background="DodgerBl ue" 
HorizontalAlignment="Stretch" Vertical Alignment="Top" > 
<TextBlock x:Name="mnuAccueil" Text=" Accueil " 
FontFami ly="Verdana" Foreground="White" Margin="15" 
MouseEnter="innu_MouseEnter" MouseLeave="mnu_Mouse Leave" 
Mouse LeftButtonUp="mnu_MouseLeftButtonUp" /> 
<Line X1="0" Y 1 = " 1 5 " X2="0" Y2="35" Stroke="Whi te" /> 
<TextBlock x:Name="mnuProduits" Text="Nos produits" FontFami ly="Verdana" 
Foreg round= "White" Margin="15" 

Mouse Enters "mnu_Mouse Enter" Mouse Lea ve="mnu_Mouse Leave" 
Mouse LeftButtonUp="mnu_MouseLeftButtonUp" /> 
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<Line X1="0" Yl="15" X2="0" Y2="35" Stroke="Whi te" /> 
<TextBlock x:Name="mnuSociete" Text="Notre societe" FontFami ly="Verdana" 
Foreground="White" Margin="15" 

MouseEnter="mnu_MouseEnter" Mouse Lea ve="mnu_Mousel_eave" 
Mouse LeftButtonUp="mnu_MouseLeftButtonUp"/> 
<Line X1="0" Yl="15" X2="0" Y2="35" Stroke="Whi te" /> 
</StackPanel> 

<TextBlock x:Name="mnuExpl ication" Text="Expl ication" FontFami ly="Verdana" 

FontSize="10" Foreground="White" Margin="10,0,0,3"/> 
</StackPanel> 

En C#, cela donne : 

private void mnu_MouseEnter(object sender, MouseEventArgs e) 
{ 

TextBlock x = e. Source as TextBlock; 

switch (x.Name) 

{ 

case "mnuAccuei 1 " : 

mnuExplication.Text = "Donne des informations generales"; 

break; 
case "mnuProduits" : 

mnuExplication.Text = "Donne des informations sur les produits"; 

break; 
case "mnuSociete" : 

mnuExplication.Text = "Donne des informations sur la societe"; 

break; 

} 

Cursor = Cursors. Hand; 

} 

private void mnu_Mousel_eave(object sender, MouseEventArgs e) 
{ 

Cursor = nul 1 ; 
mnuExplication.Text = ""; 

} 

TextBlock mnuSelected; // article actuellement selectionne 
private void mnu_MouseLeftButtonUp(object sender, 

MouseButtonEventArgs e) 

{ 

if (mnuSelected!=null ) 

mnuSelected. Foreground = new Sol idCol orBrushtColors .White) ; 
mnuSelected = e. Source as TextBlock; 

mnuSelected. Foreground = new SolidColorBrush(Colors.Red); 

// traiter ici la selection d'article 

} 

Et en VB : 

Private Sub mnu_MouseEnter(ByVal sender As Object, _ 

ByVal e As MouseEventArgs) 
Dim x As TextBlock = TryCastte. Source, TextBlock) 
Select Case x.Name 
Case "mnuAccuei 1" 
mnuExplication.Text = "Donne des informations generales" 
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Case "mnuProduits" 

mnuExpl ication.Text = "Donne des informations sur les produits" 
Case "mnuSociete" 

mnuExplication.Text = "Donne des informations sur la societe" 
End Select 

Cursor = Cursors. Hand 
End Sub 

Private Sub mnu_Mousel_eave(ByVal sender As Object, _ 

ByVal e As MouseEventArgs) 

Cursor = Nothing 
mnuExplication.Text = "" 
End Sub 

Private mnuSelected As TextBlock ' article actuellement selectionne 
Private Sub mnu_MouseLeftButtonllp(ByVal sender As Object, _ 

ByVal e As MouseButtonEventArgs) 

If mnuSelected IsNot Nothing Then 

mnuSelected. Foreground = New SolidColorBrush(Colors. White) 
End If 

mnuSelected = TryCastte. Source, TextBlock) 
mnuSelected. Foreground = New SolidColorBrush(Colors.Red) 

' traiter ici la selection d'article 
End Sub 

La creation dynamique d'objets 

Puisque les balises XAML correspondent a des objets connus du run-time Silverlight, il 
est possible de creer des elements UI (mais aussi des transformations et des animations) 
par programme, a n'importe quel moment en cours d'execution de l'application Silverlight. 
II pourrait s'agir de la phase de chargement (evenement Loaded), avant le tout premier 
affichage de la page, mais aussi de tout autre moment. 

Pour illustrer la creation dynamique d'objets, nous allons creer un rectangle de toutes 
pieces en cours d'execution de programme. Pour cela, il convient de declarer une varia- 
ble dans la classe de la page Silverlight (classe appelee Page par defaut), en dehors des 
fonctions (la variable sera ainsi accessible a partir des differentes fonctions). 

En C#, cette declaration s'ecrit : 

Rectangle rc; 
Et en VB : 

Dim rc as Rectangle 

Ensuite, le rectangle est cree en memoire, ce qui serait egalement le cas pour tout autre 
objet. 

En C#, cette creation en memoire du rectangle s'ecrit : 

rc = new Rectangl e( ) ; 
Et en VB : 

rc = New Rectangle 
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A ce stade, rien ne s'affiche encore, meme si l'objet a ete cree en memoire. 

Pour initialiser les proprietes du rectangle rc (bien que, jusqu'a present, rien ne soit 
encore affiche), il convient d'ecrire le code suivant (ici, en C#) : 

rc. Width = 200; rc.Fill = new SolidColorBrush(Colors.Red); 

La syntaxe est identique en VB mais soyez attentif aux trois petites differences suivantes : 

• pas de point- virgule ( ; ) en VB pour terminer une instruction ; 

• deux ou plusieurs instructions peuvent etre placees en VB sur une meme ligne a condition 
d'etre separees par le deux-points (:) ; 

• En VB, on termine une ligne avec le caractere de soulignement (underscore) pour 
signaler que l'instruction se poursuit a la ligne suivante. 

Pour positionner le rectangle dans un canevas, deux techniques peuvent etre utilisees. 

La premiere consiste a appeler les fonctions statiques SetLeft, SetTop et SetZIndex de la 
classe Canvas : 

Canvas. Setl_eft(rc, 200); 
Canvas. SetTop(rc, 100); 

La seconde consiste a appeler la fonction SetValue appliquee a l'objet (ici, quand le 
conteneur est un canevas). 

En C#, cela donne : 

rc. SetVal ue( Canvas. LeftProperty, 200.0); 
et en VB : 

rc.SetValue(Canvas.TopProperty , 100.0) 

Le second argument de SetVal ue doit etre de type doubl e, d'ou les valeurs 200.0 et le 100.0 
dans l'exemple ci-dessus. Aucune conversion ne peut etre implicitement realisee car la 
signature de la fonction indique que cet argument est de type object. Si ce second argu- 
ment est le nom d'une variable, un transtypage (casting en anglais) est necessaire : 

rc. SetVal ue( Canvas . LeftProperty, (doubl e)n) ; 

Pour placer le rectangle dans une cellule de grille (ici, la cellule en quatrieme rangee et 
cinquieme colonne), il convient d'ecrire le code suivant : 

rc. SetVal ue(Grid. RowProperty , 3) ; 
rc. SetValue (Grid. Column Property, 4) ; 

Pour positionner le rectangle dans une cellule de grille ou un StackPanel , il faut imposer 
un alignement en haut a gauche et specifier les marges. Par exemple : 

rc.HorizontalAl ignment = HorizontalAlignment. Right; 
rc. Vertical Alignment = VerticalAlignment.Top; 
rc. Margin = new ThicknessdO, 20, 0, 0); 
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L'objet rc a ete cree en memoire et initialise, mais il ne fait pas encore partie des objets 
« enfants » de son conteneur (et de ce fait, il ne peut pas encore etre affiche). II faut done 
l'ajouter a la collection des nceuds enfants de son conteneur (ici, LayoutRoot, qui est par 
defaut le nom interne du conteneur le plus externe) : 

LayoutRoot. Children. Add(rc) ; 

Au debut de ce chapitre, nous avons vu comment associer dynamiquement une fonction 
de traitement (existante) a un evenement relatif a un element UI. La technique est la 
meme pour les elements UI crees dynamiquement. 

Comment modifier le contenu d'un conteneur ? 

La liste des nceuds enfants d'un conteneur peut etre manipulee comme n'importe quelle 
collection sous le framework .NET (la propriete Chi 1 dren d'un conteneur designe une collec- 
tion). Le tableau 6-7 presente les methodes et les proprietes applicables a une collection. 



Tableau 6-7 - Les methodes et les proprietes applicables a une collection 



Methode 


Description 


ClearO 


Supprime tous les noeuds enfants. Par exemple : 

xyz. Children. Cleart ) 
oil xyz desige le nom interne -propriete x:Name - d'un conteneur, par exemple 
LayoutRoot. 

Les objets restent neanmoins en memoire (mais ils sont desormais invisibles) et peuvent 
encore etre utilises pour etre accroches a un conteneur. 


Count 


Propriete indiquant le nombre de noeuds enfants (de premier niveau) : 
n = xyz. Children. Count 


Add(obj) 


Ajoute un noeud enfant a la fin de la liste. 


Insert(n, obj) 


Insere un nceud enfant en n'* me position (0 pour la premiere) : 
xyz. Chi ldren. Insertd . rc) 


Remove (obj ) 


Supprime un objet determine : 
xyz. Chi ldren. Remove (rc) 


RemoveAt(n) 


Supprime un objet en un emplacement determine (0 pour le premier emplacement). 



Dans le code C# suivant, le rectangle est insere dans une cellule de grille (en deuxieme 
rangee et troisieme colonne), avec placement fixe dans cette cellule: 

Rectangle rc; // declaration dans la classe Page, en dehors des fonctions 



rc = new Rectangl e( ) ; 

rc.SetValue(Grid.RowProperty, 1) ; 

rc.SetValue( Grid. Column Property, 2) ; 

rc. Horizontal Al ignment = HorizontalAl ignment. Left; 

rc. Vertical Al ignment = VerticalAlignment.Top; 

rc. Margin = new ThicknessdO, 20, 0, 0); 

rc. Width = 200; rc. Height = 150; 
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rc. Stroke = new Sol idCol orBrush(Col ors . Red) ; 
rc.StrokeThickness = 3; 
LayoutRoot. Children. Add(rc) ; 

Dans le code VB suivant, le rectangle est cette fois insere dans un canevas : 

Dim rc As Rectangle ' declaration dans la classe Page, en dehors des fonctions 



rc = New RectangleO 
rc. Width = 200 : rc. Height = 150 

rc.Stroke=New SolidColorBrush(Colors.Red) : rc.StrokeThickness = 3 
rc.SetVal ue( Canvas . Lef t Property , 10) 
rc.SetVal ue( Canvas .TopProperty , 20) 
Layout Root. Children. Add (rc) 

Dans ce cas, le rectangle est transparent (et done limite a un cadre) car la propriete Fi 1 1 
n'a pas ete initialisee. 



La creation dynamique a partir du XAML 

La fonction Load de la classe Xaml Reader permet de creer dynamiquement des elements UI 
a partir d'une chaine de caracteres contenant le XAML de cet element UI. 

Le XAML proviendra ici d'une chaine de caracteres enregistree en memoire. II pourrait 
egalement provenir d'une ressource ou etre telecharge depuis un serveur. 

La classe Xaml Reader fait partie de l'espace de noms System. Windows .Markup. II ne faut 
done pas oublier le using (en C#) ou 1' Imports (en VB) correspondant en tete du fichier 
Page. xaml .cs ou Page. xaml .vb. 

Ensuite, il suffit : 

• de specifier le XAML dans une chaine de caracteres, sans oublier d'ajouter une clause 
xml ns= ' http: //schema s .mi crosoft.com/cl ient/2007 ' ; 

• de creer 1'elementUI en memoire avec Xaml Reader. Load, qui renvoie une reference a 
l'element UI mais sous forme d'un object (car le veritable type depend du contenu de 
la chaine XAML, qui n'est pas necessairement connu au moment de la compilation) ou 
null (Nothi ng en VB) en cas d'erreur ; 

• d'ajouter l'objet ainsi cree a la liste des noeuds enfants d'un conteneur. 

Par exemple, pour creer un rectangle rouge dans un conteneur (ici, un canevas), a partir 
du point (X, Y) et avec les dimensions (W, H), le code C# sera : 

using System. Windows. Markup; 



int X=50, Y=150, W=100, H=75; 

string s = "<Rectangle xmlns='http://schemas. microsoft.com/client/2007' " 
+ Canvas. Lef t='" + X + "' Canvas. Top='" + Y + "' " 
+ "Width="' + W + '" Height='" + H + " ' Fill = 'Red' />"; 

Rectangle rc = (Rectangl e)Xaml Reader . Load(s) ; 

Layout Root. Children. Add (rc) ; 
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et le code VB : 

Imports System. Windows. Markup ' avant la declaration de la classe 



Dim s As String 

Dim X = 20, Y = 200, H = 200, W = 150 

s = "<Rectangl e xmlns='http://schemas. microsoft.com/client/2007' " _ 
& "Canvas. Left=' " & X & "' Canvas. Top="' & Y & " ' Width=" 
& W & '" Height="' & H & "' Fill = ' Red' />" 
Dim rc As Rectangle 
rc = XamlReader.Load(s) 
Lay out Root. Children. Add (rc) 

Les apostrophes doubles (") ont ete remplacees par des apostrophes simples (') dans le 
XAML afin de ne pas entrer en conflit avec la syntaxe du C# et du VB qui considerent les 
" comme des caracteres de debut et de fin de chaine. Si le XAML provient d'une source 
exterieure comme un service Web (voir chapitre 13), il n'y a cependant pas de probleme. 

II est impossible de specifier un attribut x:Name dans la balise XAML contenue dans s. 
Pour donner un nom interne (ce que nous avons fait jusqu'a present avec l'attribut x: Name) 
a l'objet ainsi cree et pouvoir le manipuler en cours d'execution de programme, il faut 
specifier un attribut Name et recuperer une reference a 1' element UI cree dynamiquement 
en utilisant la fonction FindName. Une autre solution consiste a retenir la reference qui 
avait ete renvoyee par Xaml Reader. Load. Par exemple : 

<Rectangle Name="rc" /> 

On retrouve en C# une reference au rectangle mentionne dans s (chaine dans laquelle on 
a ajoute Name="rc") en ecrivant : 

Rectangle r = (Rectangle)FindNameC'rc") ; 
r. Width *= 2; // on double sa largeur 

Ce qui s'ecrit en VB : 

Dim r As Rectangle 
r = FindNameC'rc") 
r. Width *= 2 

Programmes d'accompagnement 

Vous trouverez les sources des programmes Silverlight qui suivent sur le site d'accompa- 
gnement de l'ouvrage. 

Exemple 1 : 

Pour creer un rectangle semi-transparent, cliquez sur un coin du rectangle et deplacez la 
souris a l'endroit souhaite pour le coin oppose, tout en maintenant le bouton de la souris 
enfonce. La construction du rectangle suit done le deplacement de la souris (figure 6-2). 
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Figure 6-2 




Exemple 2 : 

Trace d'une courbe a l'aide de la souris. Lors du relachement du bouton, une balle suit la 
courbe qui vient d'etre dessinee (figure 6-3). 

Figure 6-3 




Exemple 3 : 

Trace d'une courbe a l'aide de la souris, courbe suivie ensuite par un Pacman qui mange 
la ligne en suivant sa courbure (figure 6-4). 

Figure 6-4 




7 



Les images, les curseurs 
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Les images 

Silverlight peut evidemment afficher des images, a condition qu'elles soient au 
format . jpg ou .png (format qui permet 1'affichage d'images presentant des zones trans- 
parentes). 

Interessons-nous d'abord a la source de l'image, c'est-a-dire a son emplacement. 

Les images en ressources 

Plusieurs techniques sont possibles pour inserer une image dans une page Silverlight. La 
premiere consiste a inserer l'image en ressource de 1' application. Pour cela, ouvrez 
l'Explorateur de solutions, effectuez un clic droit sur le nom du projet, selectionnez 
Ajouter> Element existant... et localisez l'image souhaitee sur votre ordinateur. Visual 
Studio copie alors l'image dans le repertoire du projet. L'image sera ainsi greffee en 
ressource de l'application (effectuez un clic droit sur le nom de l'image dans le projet 
puis selectionnez Proprietes, vous constatez alors que l'attribut Action de generation a 
pourvaleur Resource). 

La forme la plus elementaire de la balise Image s'ecrit : 

<Image Source="MonaLisa.jpg" /> 

ou doit etre remplace par des attributs tels que Gri d . Row ou Canvas . Left en fonction 

du conteneur choisi. 
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Pour mieux organiser le projet de 1' application Silverlight, les images sont generale- 
ment regroupees dans des sous-repertoires du projet. Pour creer un sous -repertoire 
contenant des donnees d'un type particulier (par exemple, les images de 1' application), 
effectuez un clic droit sur le projet (partie Silverlight) et selectionnez Ajouter>Nouveau 
dossier. Inserez alors l'image en ressource en partant de ce sous-repertoire, comme 
explique precedemment. 

Apres compilation, l'image (ici, MonaLisa.jpg) est greffee dans la DLL (qu'on appelle 
assembly dans le jargon .NET) contenant le code C# ou VB compile, DLL qui est elle- 
meme greffee dans le fichier XAP (dans le sous-repertoire ClientBin de la partie Web) 
qui est envoye au navigateur avec le fichier HTML. 

Notez aussi cette subtile difference car cela aura bientot une repercussion : avec la valeur 
Resource dans l'attribut Action de generation des proprietes de l'image (propriete dans 
l'Explorateur de solutions), cette derniere n'est pas directement greffee au fichier XAP 
mais bien a la DLL, elle-meme greffee au fichier XAP. 

L'image est neanmoins directement greffee au fichier XAP, mais en dehors de la DLL 
contenant le code compile de l'application Silverlight si l'attribut Action de generation 
de l'image est Content (pour visualiser les proprietes de l'image, effectuez un clic droit 
sur le nom de celle-ci et selectionnez Proprietes). Cela ne change rien pour le deploie- 
ment de notre application Web ou son utilisateur, mais nous verrons bientot que cela peut 
avoir une influence pour le programmeur. 

Les images qui ne sont pas en ressources 

Une image ne doit pas necessairement etre inseree en ressource de l'application Silverlight 
mais dans ce cas, elle doit etre copiee dans le repertoire CI i entBi n qui doit egalement etre 
cree sur le serveur. L'image n'est pas greffee au fichier XAP mais elle est chargee par le 
navigateur (independamment du fichier XAP) lors de la phase de preparation de la page. 

Sur le serveur (chez votre hebergeur si vous ne disposez pas de 1' infrastructure neces- 
saire), les applications Web sont generalement sous controle d'HS de Microsoft ou 
d'Apache si le serveur est sous Linux. S'il s'agit d' Apache, soyez attentif a respecter la 
casse : les lettres minuscules et majuscules sont en effet considerees comme differentes. 

Que se passe-t-il si un meme nom d'image (par exemple, MonaLisa.jpg) se trouve a la fois 
en ressource et dans le repertoire CI i entBi n ? Si Silverlight trouve l'image en ressource 
(directement dans le fichier XAP ou dans la DLL incorporee a celui-ci), il prend cette 
image. Sinon, il poursuit sa recherche dans le repertoire CI i entBi n. 

Neanmoins, si la balise est (notez le / en tete du nom) : 

<Image Source="/Monal_isa. jpg" /> 

le prefixe / signifie : « le fichier est d'abord recherche dans le fichier XAP mais sans le 
rechercher dans les DLL incluses dans ce fichier XAP et la recherche se poursuit, si 
necessaire, dans le repertoire CI i entBi n ». La valeur de la propriete Action de generation 
a done bien une influence. 
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L' association entre le composant Image et le nom de l'image peut etre effectuee en cours 
d' execution de programme en ecrivant : 

<Image x:Name="img" /> 



using System. Windows. Media. Imaging; 



img. Source = new Bitmaplmage(new Uri ( "MonaLi sa . jpg" , Uri Kind. Rel ati ve) ) ; 

Pour utiliser la classe Bitmaplmage, il faut mentionner l'espace de noms System. Windows 
.Media. Imaging dans le programme (directive using en C# et Imports en VB, en tete du 
fichier .cs ou .vb du programme). Ici aussi, l'image mentionnee en premier argument 
du constructeur d'Uri doit se trouver dans le repertoire du fichier XAP (ou un sous- 
repertoire de celui-ci, a condition evidemment de le mentionner dans le nom du fichier). 

Au chapitre 13, nous verrons comment acceder, via l'objet WebCl ient, a une image stoc- 
kee sur un serve ur, y compris un serve ur d' images comme Flickr. 



Taille des images et respect des proportions 

Si les proprietes Wi dth et/ou Height ne sont pas specifiees pour une image, celle-ci est affi- 
chee dans sa taille d'origine. Si Width et/ou Height sont specifiees, la propriete Stretch 
permet d'indiquer comment l'image doit etre affichee dans sa surface d'affichage. En 
l'absence de clause Stretch, l'image est affichee sans deformation mais sans respecter 
Width et Height (par exemple, si Width vaut 300 et Height 10, une image carree sera affichee 
dans un rectangle de 10 x 10 pixels). 

Pour illustrer l'utilisation de la propriete Stretch, nous allons afficher l'image de la 
figure 7-1 dont la taille est de 91 x 142 pixels. Pour une bonne comprehension des diffe- 
rentes valeurs de l'attribut Stretch, nous avons modifie les attributs Width et Height 
(tableau 7-1) de la balise Image pour les images des figures 7-2 a 7-5, ceci afin de mettre 
en evidence les problemes rencontres. 




140 



Silverlight 2 



Tableau 7-1 - Les differentes valeurs de I'attribut Stretch de la balise Image 
Norn de I'attribut Resultat visuel Description 



None Figure 7-2 L'image est affichee a sa taille reelle et n'est done pas deformee. II 

se peut qu'une partie seulement de l'image (coin superieur gau- 
che) soit affichee, ou qu'une partie seulement de la zone devolue 
a l'image soit occupee (quand la surface d'affichage est plus 
grande que l'image). 


Fill F 


gure 7-3 


L'image est etendue (stretched en anglais) pour etre entierement 
affichee dans le rectangle (Width, Height). De ce fait, elle est 
generalement deformee. 


Uniform F 




L'image n'est pas deformee et est affichee dans son integralite 
(ici, dans un rectangle de 100 x 200 pixels). La plus grande image 
possible est affichee (ici, le rectangle est affiche dans le seul but 
de montrer I'effet). Des bords peuvent done apparaitre a gauche, a 
droite, au-dessus ou au-dessous (ici, au-dessus et au-dessous). 


UniformToFi 1 1 F 


gure 7-5 


L'image (la plus grande possible) est affichee sans deformation 
mais pas necessairement dans son integralite. L'image est done 
generalement coupee au-dessus et au-dessous (ce qui est le cas 
ici) ou a gauche et a droite. 



Les evenements lies a la souris (MouseMove, etc.) peuvent etre traites pour une image, 
comme pour n'importe quel composant. L'evenement ImageFailed est signale si l'image 
ne peut etre affichee (image non trouvee ou probleme de format). 

Lire une image a partir du systeme de fichiers local 

Une application Silverlight peut lire des images qui se trouvent sur la machine de l'utili- 
sateur mais sous controle de celui-ci (e'est lui, imperativement, qui mene a ce fichier et 
l'application Silverlight ignore tout du chemin qui mene a celui-ci). Elle peut en effet 
ouvrir une boite de dialogue et permettre a l'utilisateur de naviguer dans son systeme de 
fichiers local pour selectionner une ou plusieurs de ses images (figure 7-6). Cette boite 
de dialogue est un objet OpenFileDialog. 
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Figure 7-6 
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Dans le filtre (propriete Fi 1 ter de l'objet OpenFi 1 eDi al og), deux informations separees par 
une barre verticale doivent etre specifiees : 

• le libelle qui sera affiche tel quel, ici Images (*.jpg ou *.png) ; 

• les filtres eux-memes (ici, ne seront retenus que les fichiers ayant pour extensions . jpg 
et .png, quel que soit le nom du fichier image). 

La boite de dialogue est alors affichee par of d . ShowDi al og( ) : 

Si l'utilisateur selectionne une image, la fonction of d .ShowDi al og( ) se termine et renvoie 
la valeur Di al ogResul t . OK. Le programme ouvre alors le fichier de 1' image arm de lire son 
contenu et cree un objet Bitmaplmage a partir de celui-ci (qui est lu dans le flux stream). 

Voici le code correspondant en C# : 

using System. 10; 

using System. Windows. Media. Imaging; 



Open Fi 1 eDi al og ofd = new OpenFileDialogO; 

ofd. Filter = "Images (*.jpg ou *. png) |*. jpg;*. png"; 

if (ofd.ShowDialogO == DialogResult.OK) 

( 

Stream stream = ofd.SelectedFile.OpenReadt ) ; 
Bitmaplmage bi = new Bitmaplmage( ) ; 
bi .SetSource(stream) ; 
img. Source = bi ; 
stream. Closet ) ; 

} 
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et le meme code en VB : 

Imports System. Windows. Media. Imaging 
Imports System. Windows. Resources 
Imports System. 10 



Dim ofd As OpenFi 1 eDi al og 
ofd = New OpenFi 1 eDi al og( ) 

ofd. Filter = "Images (*.jpg on *.png) |*. jpg;*.png" 
If ofd.ShowDialogO = DialogResult.OK Then 

Dim stream As Stream = ofd.SelectedFile.OpenRead( ) 

Dim bi As Bitmaplmage = New Bitmaplmage( ) 

bi .SetSource(stream) 

img. Source = bi 

stream. CI ose( ) 
End If 

Le clipping d'image 

Une image (mais aussi une video) peut etre decoupee selon les contours de n'importe quelle 
forme (par exemple, une ellipse mais il pourrait s'agir d'une forme bien plus complexe, 
voir la section « Le Path » du chapitre 8). La zone de decoupe est definie par une « geome- 
trie » telle que El 1 ipseGeometry. 

Expliquons tout d'abord ce qu'est une geometrie. Alors qu'un objet El 1 ipse a une repre- 
sentation visuelle (une ellipse dessinee dans son conteneur), Ell ipseGeometry consiste en 
la definition, en memoire, d'une ellipse. Si un objet El 1 ipse peut etre enfant d'un conte- 
neur, un objet El 1 i pseGeometry ne peut pas l'etre : il doit etre enfant (autrement dit, defini 
sous une balise) d'une propriete telle que Clip (ce qui nous interesse ici) ou Data d'un 
objet Path (voir la section « Le Path » du chapitre 8). 

Silverlight definit quatre geometries differentes (tableau 7-2) ainsi que GeometryGroup qui 
permet de creer des geometries complexes par combinaison de geometries de base. 



Tableau 7-2 - Les differentes geometries definies dans Silverlight 



Norn de la geometrie 


Description 


El 1 ipseGeometry 


Une ellipse definit la geometrie, avec Center, RadiusX et RadiusY comme proprietes. 
Les coordonnees sont relatives au coin superieur gauche de I'image (voir exemple ci- 
dessous). 


LineGeometry 


Une ligne definit la geometrie par un point de depart (propriete Start Poi nt) et un point 
d'arrivee (EndPoint) : 

<LineGeometry StartPoint="10.10" EndPoint="100,80" /> 


PathGeometry 


Un Path definit la geometrie, ce qui permet de creer des regions de coupe de n'importe 
quelle forme, souvent meme tres complexe. 


Rectangl eGeometry 


Un rectangle definit la geometrie. 
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Pour illustrer le fonctionnement des geometries, nous allons creer une zone de clipping 
en forme d'ellipse pour l'image MonaLisa . jpg (figure 7-7). Voici le code correspondant : 

<Image Width="182" Height="284" Source="Monal_isa. jpg" > 

<Image.Clip> 
<EllipseGeometry Center="91 ,142" 

RadiusX="91" RadiusY="142" /> 

</Image.Cl ip> 
</Image> 




Pour realiser une decoupe avec Expression Blend, creez tout d' abord une ellipse et super- 
posez-la a l'image (au besoin, modifiez temporairement la transparence de l'ellipse pour 
que l'image de fond soit encore partiellement visible, ce qui vous aidera dans le position- 
nement et la taille de l'ellipse de decoupe). Selectionnez ensuite l'image et l'ellipse au moyen 
de l'outil de selection et cliquez sur chacun de ces elements tout en maintenant enfoncee 
la touche Ctrl. Enfin, procedez a la decoupe de l'image via le menu Object>Path>Make 
Clipping Path. 



Les images comme motifs de pinceau 

Une image peut etre utilisee comme pinceau (ici, pour le fond d'un rectangle) : 

<Rectangle Width="300" Height="200" Stroke="Bl ack" > 

<Rectangle.Fill> 
<ImageBrush ImageSource="SilverlightLogo.jpg" /> 

</Rectangle.Fil1> 
</Rectangle> 
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Dans la mesure ou une balise ImageBrush n'a pas (contrairement a LinearGradientBrush et 
RadialGradientBrush) d'attribut SpreadMethod (avec sa valeur Repeat), l'image n'est jamais 
repetee mais est etendue (par stretching) a toute la surface du rectangle. Cela permet 
aussi de charger une image en fond de conteneur (utilisez dans ce cas la propriete 
Background). L'attribut Stretch peut etre specifie dans la balise ImageBrush. 



Les curseurs 

II est tres simple de modifier le curseur de la souris pour tout le conteneur ou pour un 
element UI particulier (quand la souris le survole). En effet, il suffit d'ajouter ou de changer 
la valeur de l'attribut Cursor dans la balise de cet element. Les figures 7-8 a 7-13 presentent 
le rendu visuel pour les differentes valeurs (qui proviennent de 1' enumeration Cursors) de 
l'attribut Cursor. 



Figure 7-8 

Arrow 



Figure 7-9 

Eraser 



Figure 7-10 

Hand 



ft 



Figure 7-11 

IBeam 



I 



Figure 7-12 

Stylus 



Figure 7-13 

Wait 



A ces six valeurs, il convient d'ajouter les valeurs Default (curseur par defaut) et None 
(aucun curseur, ce qui s'avere utile lorsque Ton cree son propre curseur a partir d'une 
forme geometrique ou d'une image avec transparence). 

Pour changer de curseur par programme, il suffit d'initialiser la propriete Cursor de 
1 ' element UI avec la valeur Cursors. xyz, oil xyz doit etre remplace par l'une des huit 
valeurs mentionnees precedemment. Par exemple, si rc est le nom interne (propriete 
x: Name) d'un element UI, on aura : 

rc. Cursor = Cursors. Eraser; 

Le curseur prendra alors la forme d'une gomme quand la souris survolera le rectangle rc. 
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Les sons et les films 

Silverlight fournit les codecs necessaires pour lire de la video haute performance et haute 
qualite en mode streaming ou en mode de chargement progressif (progressive download 
en anglais), ce qui implique le remplissage d'une memoire tampon avant de commencer 
a jouer la video. On s'accommode ainsi des variations de debit dans le transfert des 
donnees, sans perturbation pour l'utilisateur (sauf lorsque le tampon devient vide par 
manque d'approvisionnement en donnees). 

Silverlight n'accepte que le format .wmv pour la video et les formats .wma et .mp3 pour 
l'audio. Si vos videos sont aux formats .avi, .mpg ou .flv, vous devrez au prealable les 
convertir. Microsoft Expression Encoder accepte les formats .avi, .mpg, .asf, .vob, .avs, 
.mov, .m4v, .mp4, .3gp, .3g2et .dv pour la video ainsi que les formats .wav, .aiff, .bwf, .m4a 
et .m4b pour l'audio, et peut les convertir en .wmv pour la video et .mp3 ou .wma pour 
l'audio. On trouve aussi sur Internet de nombreux convertisseurs en shareware. 

La balise XAML pour la diffusion de musique et de video est Medi a El ement. La plupart de 
ses proprietes sont maintenant deja bien connues (voir la section « Taille des images et 
respect des proportions » de ce chapitre pour la propriete Stretch). Si vous ne specifiez 
pas d'attribut Width et Height, la video est jouee a sa taille d'origine. Le tableau 7-3 
presente les differentes proprietes de cette balise. 



Tableau 7-3 - Les proprietes de la balise MediaElement 



Norn de la propriete 


Description 


AutoPl ay 


Si Autopl ay vaut true, le media est joue des le chargement. Avec f al se, vous devez 
executer PI ay pour demarrer la lecture. Un media n'est jamais joue qu'une seule fois ! II 
taut done detecter la fin (evenement Medi a Ended) et relancer la video par programme. 


BufferingTime 


Temps de mise en cache (buffering). Par defaut, ce temps est de 5 secondes. Buffe- 
ringTime, qui est de type TimeSpan, est specifie dans le format "hh:mm: ss .mmm". 


IsMuted 


Si IsMuted vaut true, le media est joue en silence. 


Position 


Position courante dans le media (il s'agit d'un objet TimeSpan). 


Source 


Norn du fichier. 


Vol ume 


Une valeur entre 0 et 1 indiquant le volume sonore. 



Par programme, vous pouvez executer les fonctions suivantes, dont les noms parlent 
d'eux-memes : Play, Pause et Stop. 

Quand la fin d'un media est atteinte, l'evenement MediaEnded est signale. Pour rejouer le 
media, vous devez traiter cet evenement, remettre Posi ti on a zero et jouer a nouveau le media. 
Stop a le meme effet : 

<MediaElement x:Name="video" MediaEnded="video_MediaEnded" /> 



void video_MediaEnded(object sender, RoutedEvent e) 
{ 

video. Position = new TimeSpan(O); 
video. PI ay ( ) ; 

} 
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La propriete CurrentState indique l'etat de la video, soit l'une des valeurs de remunera- 
tion MediaElementState dont les differentes valeurs sont AcquiringLicence, Buffering, 
Closed, Opening, Paused, Playing et Stopped. 

Comme pour les images, copiez les fichiers .wmv et .mp3 dans le repertoire CI ientBin de la 
partie Web. 

Une video peut etre utilisee comme pinceau VideoBrush. Par exemple : 
<Medi a El ement x:Name="vid" Source="i NTERACT.wmv" Op«city="0" /> 

<TextBlock Text="iNTERACT" FontFamily="Verdana" FontSize="50" > 

<Text Block. Foreground> 
<VideoBrush SourceName="vid" /> 

</TextBlock. Foreground> 
</TextBlock> 

Lorsque la fonction vi d . PI ay ( ) est executee, la video est jouee dans les lettres. 

Deep Zoom 

La technologie Deep Zoom permet de zoomer de plus en plus profondement dans une 
image et cela sans devoir telecharger une image de taille deraisonnable pour le Web et 
sans provoquer de delai d'attente chez l'utilisateur. 

Pour experimenter Deep Zoom et vous faire une idee de ses prodigieuses possibilites (par 
exemple, une visite virtuelle ou les caracteristiques detaillees d'un produit), rendez-vous 
par exemple sur le site http://memorabil ia .hardrock.com, consacre aux legendes du rock 
(figure 7-14). 
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Amusez-vous ensuite (par exemple) a deplacer le curseur de la souris au-dessus de la 
miniature representant la Harley-Davidson d'Elvis Presley et zoomez progressivement 
(grace a la molette de la souris ou en cliquant sur l'image), sur des details de plus en plus 
precis (figures 7-15 et 7-16). 




S'il s'agissait d'une seule image (de taille gigantesque), il faudrait des heures, meme 
avec une connexion haut debit, avant qu'elle ne s'affiche dans votre navigate ur. 

Pour developper une application Silverlight faisant appel a la technologie Deep Zoom, vous 
devez installer Deep Zoom Composer, telechargeable depuis le site http://www. micro- 
soft, com/download (effectuez une recherche sur « Deep Zoom »). Deep Zoom Composer 
est egalement propose sur la page d' installation des outils de developpement Silverlight. 
Telechargez le fichier et installez Deep Zoom Composer sur votre ordinateur. Ce logiciel 
ne concerne que les developpeurs, les utilisateurs n'ayant, eux, rien a installer. 

Lancez Deep Zoom Composer (figure 7-17). 
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Nous allons creer un nouveau projet et, pour cela, Deep Zoom Composer va passer par 
trois etapes : 

• Import : importation de vos differentes images (dont certaines peuvent etre de tres 
grande taille) ; 

• Compose : phase de composition dans laquelle vous devez indiquer les chevauchements 
d'images afin de rentrer dans des zones de plus en plus precises ; 

• Export : phase de creation des images intermediates (Deep Zoom Composer va ainsi 
creer plusieurs dizaines d'images de taille optimale pour des transferts de qualite sur le 
Web). 

Pour illustrer 1' utilisation de la technologie Deep Zoom, nous allons creer une applica- 
tion Silverlight qui permettra de zoomer sur une carte de France pour en arriver a une 
visite du cimetiere du Pere-Lachaise. 

Chargez tout d'abord une carte de France, qui provient d'une image de tres grande taille 
(plus de 10 Mo). Pour cela, cliquez sur le bouton Add Image... et selectionnez 1' image 
sur votre ordinateur (figure 7-18). 



Figure 7-18 

^ VcrsPcrcUchaise Deep Zoom Composer 



Add Image... 




Type JPG file 
[^mentions: 6112 x 6272 
rile size: 11.48 MO 
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Chargez ensuite le plan du Pere-Lachaise selon la meme procedure (figure 7-19). Ideale- 
ment, il aurait fallu charger egalement une carte de la region parisienne, une autre de 
Paris et eventuellement une derniere du 20 e arrondissement, de maniere a zoomer avec 
une precision de plus en plus grande tout en offrant un luxe de details a chaque stade de 
notre visite virtuelle. 



Figure 7-19 




Passons maintenant a la phase de composition. Pour cela, cliquez sur l'onglet Compose 
et faites glisser la carte de France dans le cadre central. Selectionnez ensuite l'outil Zoom 
situe en bas de ce cadre central et zoomez sur la region parisienne (figure 7-20). 

Puis, faites glisser la vignette de la seconde image (plan du Pere-Lachaise) dans le cadre 
central et placez-la a l'endroit ou l'utilisateur entrera en zoomant au Pere-Lachaise 
(heureusement pour lui, confortablement assis devant son ordinateur). 




Passons maintenant a la derniere phase, au cours de laquelle Deep Zoom Composer 
calcule et cree toutes les images intermediaries (plusieurs dizaines). Cliquez pour cela 
sur l'onglet Export. 

A ce stade, il est possible de reclamer la creation d'un projet Visual Studio (cochez pour 
cela l'option Export Images and Silverlight Project, figure 7-21). Dans ce cas, les images 
seront automatiquement copiees dans un sous-repertoire Generatedlmages du repertoire 
CI i entBi n de la partie Web du projet (celui du fichier XAP). II faut un peu chercher pour 
le trouver et passer par plusieurs niveaux de sous-repertoires, dont OutputSdi et source 
Images, mais le projet est bien la. Vous pouvez le recuperer et l'utiliser comme base d'une 
application bien plus etoffee. 

Un fichier MouseWheel Helper est egalement cree, qui contient le code de detection des 
mouvements de la molette de la souris. L'utilisateur de l'application Silverlight pourra 
ainsi, de maniere tres naturelle, zoomer de plus en plus ou de moins en moins profonde- 
ment lorsque la souris survolera l'image dans une page Silverlight. 

Sans quitter Deep Zoom Composer, on peut deja tester le resultat de cette application. 
Pour cela, cliquez sur le bouton Export et cliquez sur Preview in Browser (figure 7-22). 
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Dans le projet de 1' application Silverlight, il suffit ensuite d'inserer un composant 
Multi Scale Image (en fait, c'est deja fait par Deep Zoom Composer) qui s'utilise comme le 
composant Image, sauf que l'attribut Source doit faire reference a un fichier d'exten- 
sion .bin cree par Deep Zoom Composer : 

<Mul ti Scale Image Source="GeneratedImages/dzc_output/info.bin" 

Height="440" x:Name="msi" Width="600" Canvas . Left="20" Canvas .Top="20"/> 

II reste a tester 1' application, ici avec Safari (figures 7-23 et 7-24) et Firefox (figure 7-25) 
a differents stades du zoom. Impressionnant et prometteur d' applications Web d'un 
nouveau type ! 



Figure 7-23 
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Figure 7-24 



Figure 7-25 
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Tourner la page 

Nous allons maintenant apprendre a tourner la page. . . Pour cela, prenons l'exemple d'un 
album de peintures de Breughel dont on peut tourner les pages comme on le ferait avec 
n'importe quel album « papier » a la difference ici que les pages sont tournees au moyen 
de la souris (en cliquant sur un coin de la page et en deplacant la souris, bouton enfonce, 
vers la gauche ou vers la droite (figures 7-26 a 7-28). 





Figure 7-27 
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Figure 7-28 




Pour realiser cet album « virtuel », il faut utiliser un composant developpe par Mitsu Furuta 
de Microsoft France et telechargeable sur le site http://www.codeplex.com/wpfbookcontrol. 
Vous pouvez utiliser ce composant sans etre redevable de royalties. La seule obligation est 
de respecter les regies Codeplex, qui sont vraiment de bon sens et legitimes envers un contri- 
buteur qui met gratuitement un composant d'un tel interet a la disposition de tous. 

Telechargez le fichierZIP mis a disposition et decompressez-le. Vous constatez alors qu'il 
contient un fichier nomme SLMitsuControls.dll, dont la faille est de 34 Ko (cette DLL 
sera greffee au fichier XAP envoy e au client). 

Voyons maintenant comment inserer ce composant dans une page Silverlight. Pour cela, 
vous devez tout d'abord faire reference a la DLL SLMitsuControls.dll dans le projet de 
P application. Effectuez un clic droit sur le projet Silverlight dans l'Explorateur de solu- 
tions, selectionnez le menu Ajouter une reference... >Parcourir... et localisez le fichier 
SLMitsuControls.dll sur votre ordinateur. 

Dans la balise UserControl du fichier Page .xaml , ajoutez la ligne de code suivante, qui indique 
que les composants prefixes de local sont acceptes et que le code correspondant se trouve 
dans SLMi tsuControl s (vous pourriez remplacer 1 ocal par tout autre prefixe de votre choix) : 

xmlns:local="clr-namespace:SLMitsuControls;assembly=SLMitsuControls" 

Ajoutez ce composant dans la page Silverlight, dans Page. xaml (ici, dans une cellule de grille, 
sans specifier de largeur ni de hauteur pour que le composant s'adapte automatiquement 
a la faille de la cellule) : 

<local :UCBook x: Name="book" Grid.Row="l" Grid. Col umn="l" /> 

II convient ensuite de traiter l'evenement Loaded pour le conteneur qu'est la grille arm de 
lier les donnees du composant a des elements de la page. Completez egalement le fichier 
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Page.xaml .cs comme suit, avec les fonctions Getltem et GetCount, et en indiquant que la 
classe Page implemente 1' interface IDataProvider : 

using SLMitsuControls; 

public partial class Page : UserControl, IDataProvider 

{ 



private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) 

{ 

book.SetData(this) ; 

} 

public object GetltemUnt index) 
{ 

return pages. Items[index] ; 

} 

public int GetCountO 
{ 

return pages. Items. Count; 

} 

En ressource du conteneur qu'est la grille, indiquez les images a reprendre dans 1' album : 
<Grid.Resources> 



<ItemsControl x:Name="pages" > 



<Image 


Source=" 


Sreughel 1.; 


pg" 


Stretch^ 


"Fill" 


/> 


<Image 


Source^" 


ireughel2.; 


pg" 


Stretch= 


"Fill' 


/> 


<Image 


Source=" 


ireughel3.; 


pg" 


Stretch= 


"Fill' 


/> 


<Image 


Source^" 


ireughel4.; 


pg" 


Stretch= 


"Fill' 


/> 


<Image 


Source=" 


Sreughel5.; 


pg" 


Stretch^ 


"Fill' 


/> 



</ItemsControl > 
</Grid.Resources> 

Ces images doivent ensuite etre copiees dans le repertoire CI i entBi n de la partie Web de 
la solution. Pour cela, effectuez un glisser-deposer depuis l'Explorateur de fichiers 
jusqu'au nom du repertoire CI i entBi n dans l'Explorateur de solutions de Visual Studio, 
partie Web. 

L'utilisateur peut desormais tourner les pages ! 

Pour savoir quelles sont les pages affichees a l'ecran, il suffit de traiter l'evenement : 

<local :UCBook x:Name="book" OnPageTurned="book_OnPageTurned" /> 

Cette fonction de traitement est : 

private void book_OnPageTurned(int 1 eftPagelndex, int rightPagelndex) 
{ 

} 

Elle est automatiquement executee chaque fois que l'utilisateur tourne une page. 1 eft- 
Pagelndex et rightPagelndex contiennent respectivement le numero de la page de gauche 
et celui de la page de droite, avec —1 en cas d'absence de page. 
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Avec un attribut d'image Stretch tel que Uni form (qui garde les proportions de l'image mais 
laisse des bords vides), il est preferable d'inserer l'image dans une cellule de grille (sinon, 
tout se passe comme si les pages de 1' album etaient en plastique transparent). Par exemple : 

<Grid Background="AliceBlue" > 
<Image Source="Breughel 1 . jpg" Stretch="Uniform M /> 
</Grid> 

Des evenements comme MouseLef tButtonDown peuvent etre traites pour l'image, ce qui peut 
indiquer que l'utilisateur souhaite des informations complementaires sur l'article de la page. 

Le contenu d'une page n'est pas limite a une image. II peut etre une image avec du texte 
d'accompagnement : 

<Grid Background="AliceBlue" > 
<StackPanel> 

<Image Source="Breughel -Vol Icare.jpg" Stretch="Fi 11 " /> 
<TextBlock Text="Vol d'Icare.jpg" Foreground="Red" TextAlignment="Center" /> 
</StackPanel> 
</Grid> 

une boite de listes ou encore n'importe quel composant ou combinaison de composants 
Silverlight : 

<ListBox > 

<ListBoxItem Content="Al 1 emagne" FontFamily="Verdana" FontSize="25" /> 

<ListBoxItem Content="Belgique" FontFami ly="Verdana" FontSize="25" /> 

<ListBoxItem Content="France" FontFamily="Verdana" FontSize="25" /> 

<ListBoxItem Content="Italie" FontFamily="Verdana" FontSize="25" /> 

<ListBoxItem Content=" Luxembourg" FontFami ly="Verdana" FontSize="25" /> 

<ListBoxItem Content="Pays-Bas" FontFami ly="Verdana" FontSize="25" /> 
</ListBox> 



Exemple 1 : 

Scrolling d'une image de grande taille a l'aide de la souris et sans utiliser le composant 
Scrol 1 Vi ewer (figure 7-29). 



Programmes d'accompagnement 



Figure 7-29 
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Exemple 2 : 

Defilement d'images (figure 7-30). 
Figure 7-30 



Defilement d'images 




Exemple 3 : 

Defilement d'images avec animation lors de l'affichage (en grande taille) de l'image 
selectionnee (figure 7-31). 



Figure 7-31 



Defilement + animation sur selection 




Exemple 4 : 

Carrousel d'images avec animation de l'image survolee par la souris (figure 7-32). 
Figure 7-32 
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Exemple 5 : 

Autre version du carrousel (figure 7-33). 
Figure 7-33 




Exemple 6 : 

Version tournante d'un carrousel. Les images tournent en permanence tout en restant 
verticales. Un extrait de film est projete suite a un clic sur une affiche (les fichiers .wmv ne 
sont pas proposes en telechargement, figure 7-34). 

Figure 7-34 
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Exemple 7 : 

Puzzle (ramene a deux pieces pour simplifier la demonstration) avec projection d'une 
partie de film dans chaque piece. Le film est reconstitue en placant les differentes pieces 
du puzzle a leur emplacement correct (figure 7-35). 

Figure 7-35 

Puzzle pour film 
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Line, Polyline et Polygon 

Vous allez a present apprendre a tracer des lignes, des courbes (notamment de Bezier) 
ainsi que des formes plus complexes que les simples rectangles et ellipses, en XAML 
bien sur, mais aussi avec l'outil graphique Expression Blend. 

Pour commencer, tracez une ligne ou une serie de lignes. Les proprietes de la famille 
Stroke (Stroke, StrokeThi ckness, etc., voir la section « Le Stroke » de ce chapitre) qui 
s'appliquent au contour des figures jouent un role important avec les elements UI dont il 
est question ici, mais aussi avec les rectangles et les ellipses. Les differentes balises 
permettant de tracer des lignes sont presentees dans le tableau 8-1. 



Tableau 8-1 - Les balises/objets permettant de tracer des lignes 



Balise / objet 


Description 


Line 


Trace une ligne entre un premier point en (X1 , Y1 ) et un second en (X2, Y2). Par exemple, pour 
tracer une ligne en bleu, epaisse de 3 pixels entre le point (10, 10) et le point (100, 100) : 
<Line Xl="10" Yl="10" X2="100" Y2="100" 

Stroke="Bl ue" StrokeThickness="3" /> 


Pol yl ine 


Trace une serie de lignes. Les differents points (attribut Points) reliant les segments de droite sont 
separes par au moins un espace tandis que les coordonnees X et Y d'un point sont separees par un 
espace ou par une virgule (celle-ci etant meme preferable car elle assure une meilleure lisibilite). 
La propriete Fi 1 1 peut etre specifiee pour peindre I'interieur, meme si aucune ligne ne relie le 
dernier point au premier. 

Ici une ligne noire epaisse d'un pixel demarrant en (1 0, 10) et tracee jusqu'en (1 0, 1 00), une ver- 
ticale done, suivie d'une seconde (oblique) reliant le point precedent au point (50, 50) : 
<Polyl ine Points="10.10 10.100 50,50 Stroke="Bl ack" /> 


Polygon 


Memes proprietes que Polyl ine a la difference qu'une ligne est tracee pour relier le dernier 
point au premier. 

<Polygon Points="10,10 10,100 50,50 Stroke="Bl ack" /> 

. 
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A noter que la propriete StrokeDashArray (voir la section « Le Stroke » de ce chapitre) 
permet de creer des lignes en pointilles. 

Le Path 

Passons maintenant aux figures de n'importe quelle forme. Avec la balise Path, via son 
attribut Data, il est possible de tracer une serie de lignes et de courbes, autrement dit des 
figures qui peuvent devenir aussi complexes que realistes. Un Path constituant un 
element UI (comme Rectangl e ou El 1 i pse), on retrouve les proprietes Fi 1 1 avec ses diffe- 
rents pinceaux pour le coloriage interieur, Stroke pour le contour, Opacity, etc. 

Un Path peut etre defini de differentes manieres : 

• a l'aide d'une chaine de caracteres, en attribut Data de la balise Path ; 

• dans une balise Path . Data, elle-meme inseree dans une balise Path ; 

• en passant a Expression Blend (outil graphique generant des balises XAML qui 
peuvent devenir tres complexes) mais sans oublier que ce logiciel ne fait que generer la 
chaine de caracteres, parfois extremement complexe, mentionnee au premier point. 

La premiere maniere consiste a specifier les differentes operations de trace dans une 
chaine de caracteres. Chaque commande dans la chaine Data commence par une lettre, 
suivie de coordonnees. Dans cette chaine Data, une distinction doit etre faite entre majus- 
cules et minuscules : 

• les coordonnees sont absolues si la lettre de la commande est une majuscule ; 

• les coordonnees sont relatives au dernier point si la lettre de la commande est une 
minuscule. 

Canvas. Left et Canvas. Top peuvent etre specifies en attributs de Path, ce qui donne les 
coordonnees du point de depart (encore faut-il que la balise ait un canevas comme conteneur). 

Le tableau 8-2 presente les differentes commandes de generation de la balise Path. 



Tableau 8-2 - Les differentes commandes de generation de la balise Path 



Norn de la commande 


Description 


Mx,y 


Deplacement sans trace jusqu'au point (x, y). Avec M (majuscule), la coordonnee (x, y) 
est relative au coin superieur gauche du conteneur. Avec m (minuscule), les coordonnees 
sont relatives au point precedemment atteint. 

II est possible de specifier Canvas . Left et Canvas .Top en attributs de la balise Path. Si 
le conteneur est un canevas, les coordonnees sont alors relatives a ce point. 


Lx,y 


Trace une ligne reliant le point courant au point (x, y). 


Hx 


Trace une horizontale depuis le point courant jusqu'au point x. 


Vy 


Trace une verticale depuis le point courant jusqu'au point y. 


Arx.ry d fl f2 x,y 


Trace un arc jusqu'au point (x, y). Larc est une partie de I'ellipse ayant rx et ry comme rayons 
et un angle de rotation de d degres (dans le sens des aiguilles d'une montre si f 1 vaut 0). 
f 2 doit avoir la valeur 0 si I'arc est inferieur a 1 80 degres et la valeur 1 s'il est superieur. 
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Tableau 8-2 - Les differentes commandes de generation de la balise Path (suite) 



Norn de la commande 


Description 


Cxl.yl 


x2,y2 x,y 


Trace une courbe de Bezier cubique depuis le point courant jusqu'au point (x, y). Les 
deux points (xl, yl) et (x2, y2) agissent en tant que points de controle (autrement dit, 
comme des aimants). Le point courant et le point (x, y) sont done situes sur la courbe, 
contrairement aux points de controle. Ceux-ci exercent un effet d'attraction sur la 
courbe. Voir la section « Les courbes de Bezier » de ce chapitre pour une etude appro- 
fondie des courbes de Bezier. 


Qxl.yl 


x,y 


Trace une courbe de Bezier quadratique (un seul point d'attraction) entre le point courant 
et le point (x, y). Le point (xl, yl) agit comme un aimant pour le trace de la courbe. 


Z 




Termine une serie de commandes, tragant une ligne jusqu'au point de depart. 



Le code suivant correspond au trace represents a la figure 8-1 : 

I <Path Stroke="Bl ue" StrokeThickness="3" 

Data="M100,100 L200 ,200 h-100 Q150 ,250 200,200" /> 




Ce code produit : 

• un positionnement, sans rien tracer, au point (100, 100) ; 

• le trace d'une ligne droite (ici, en oblique) jusqu'au point (200, 200) ; 

• le trace d'une ligne horizontale de 100 pixels a gauche, autrement dit jusqu'au point 
(100, 200) ; 

• le trace d'une courbe (dite de Bezier) jusqu'au point (200, 200), avec le point (150, 250) 
qui agit comme point d' attraction. 

La deuxieme maniere permettant de definir un Path (peut-etre la moins pratique des trois) 
consiste a inserer des balises dans la balise Path. Data, elle-meme contenue dans la balise 
Path : 

<Path > 

<Path.Data> 



</Path.Data> 
</Path> 

Dans la balise Path. Data, vous pouvez specifier des balises dites de geometrie. Dans le 
jargon Silverlight, une geometrie consiste en la description 2D d'une ligne, d'une courbe 
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ou d'une surface. II ne s'agitdonc pas d'un element UI, comme Rectangle, Ellipse ou Path. 
Une geometrie ne presente done pas de proprietes FIT 1 , Stroke ou Opaci ty. 

Le tableau 8-3 decrit les differentes balises de geometrie. Les trois premieres sont 
evidentes et n'ont d'interet que dans un groupe (balise GeometryGroup). 



Tableau 8-3 - Les differentes balises de geometrie 



Nom de la balise 


Description 


El 1 ipseGeometry 


Permet d'inserer une ellipse dans un path. Specifiez Center, RadiusX et RadiusY. Par 
exemple : 

<E11 ipseGeometry Center="100 , 100" 

RadiusX="50" RadiusY="50" /> 


Rectangl eGeometry 


Permet d'inserer un rectangle dans un path. Specifiez Rect (une chaine de caracteres 
avec X, Y, W et H) et, eventuellement, RadiusX et RadiusY pour les coins arrondis. Par 
exemple : 

<Rectangl eGeometry Rect="100 , 100 . 80, 60" /> 


LineGeometry 


Permet d'inserer une ligne dans un path. Specifiez Start Point et End Point (chacun de la 
forme X, Y). 


PathGeometry 


Permet d'inserer n'importe quelle figure. Une balise PathGeometry peut contenir une balise 
PathGeometry . Figures, laquelle peut contenir une ou plusieurs balises PathFigure cove- 
nant une balise Path Figure. Segments. La balise PathFigure. Segments peut, quant aelle, 
contenir des balises ArcSegment, BezierSegment, LineSegment, PolyBezierSegment, 
PolyLineSegment, PolyQuadraticBezierSegment et QuadraticBezierSegment. 



Dans une balise GeometryGroup, il est possible de combiner deux geometries de base ou 
davantage (y compris des PathGeometry). 

L' exemple de code suivant correspond au trace de la figure 8-2 : 

<Path Stroke="Bl ue" StrokeThickness="5" > 
<Path.Data> 
<GeometryGroup > 
<LineGeometry StartPoint="100,100" EndPoint="200,200" /> 
<RectangleGeometry Rect=" 100 , 200 , 100 , 100" /> 
</GeometryGroup> 
</Path.Data> 
</Path> 



Figure 8-2 
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A partir d'un certain niveau de complexite de la figure, il devient plus simple de passer a 
Expression Blend qui genere automatiquement les commandes de l'attribut Data (voir la 
section « Dessiner avec Expression Blend » de ce chapitre). 



Les courbes de Bezier 

Les courbes et surfaces de Bezier jouent un role considerable dans les representations 
graphiques de courbes et de surfaces lisses. Elles ont ete imaginees pour repondre aux 
problemes de la conception et de la fabrication assistees par ordinateur, en particulier dans 
le domaine de 1' automobile. Silverlight etant limite a la 2D, le run-time Silverlight offre 
des fonctions pour dessiner ces courbes lisses, connues sous le nom de courbes de Bezier. 

Les courbes dont nous parlons ici tirent leur nom de Pierre Bezier, ingenieur francais ne 
a Paris en 1910 et diplome en tant qu'ingenieur mecanicien et ingenieur electricien. II a 
passe toute sa vie professionnelle chez Renault, debutant comme ouvrier manuel, puis 
comme modeleur et ajusteur. A la fin des annees 1950, il etait responsable de la produc- 
tion mais une nouvelle tache lui fut assignee (Pierre Bezier lui-meme donna une interpre- 
tation toute personnelle a cette « promotion ») : il s'agissait de preparer 1' introduction 
des ordinateurs comme aide a la fabrication, ce qui etait generalement considere comme 
utopique, voire farfelu, a l'epoque et tout particulierement a la Regie. Si l'histoire vous 
interesse, rendez-vous sur le site de Regis Le Boite (http://www.le-boite.com/idee.htm) et 
lisez le papier desopilant redige par Pierre Bezier lui-meme dans lequel il explique, avec 
autant d'humour que de ferocite, comment ses idees etaient recues par ses employeurs. 

Pierre Bezier devait faire face au probleme suivant : trouver des methodes pour alimenter 
les machines numeriques a partir des dessins a main levee des designers de voitures. II 
mit alors au point des algorithmes, qu'il presenta d'abord comme issus des travaux de 
recherche du fameux Professeur Onesime Durant, nes de l'esprit potache de l'ingenieur. 
Ces algorithmes sont aujourd'hui communement utilises a travers le monde et dans de tres 
nombreux domaines. Quand il partit a la retraite a l'age de 65 ans, Pierre Bezier prepara 
une these de doctorat en mathematiques et fut honore du titre de Docteur deux ans plus 
tard pour sa contribution au domaine, a savoir la mise en equation des courbes et des 
surfaces lisses. Pierre Bezier mourut a l'age de 89 ans, encore tres actif dans le domaine 
de la conception et de la fabrication assistees par ordinateur. II n'est jamais arrive a la 
conference technique ou il etait attendu et devait faire part de ses dernieres idees. . . 

Apres ce rapide rappel historique, interessons-nous maintenant a la troisieme et derniere 
maniere de definir un Path, soit au moyen des courbes de Bezier. Ces courbes partent 
d'un point S, arrivent en un point E et sont attirees par un ou plusieurs points de controle 
agissant comme des aimants. En XAML : 

• une courbe Bezi erSegment a deux points de controle (autrement dit, d'attraction) ; 

• une courbe QuadraticBezi erSegment a un seul point de controle. 

Commengons avec la courbe QuadraticBezi erSegment qui, malgre son nom impressionnant, 
est la plus simple puisqu'elle n'a qu'un seul point d'attraction. Une courbe de Bezier est 
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un Path (un path pouvant representer n'importe quelle figure) et est definie comme suit en 
XAML (on aurait pu utiliser la commande Q dans l'attribut Data du Path): 

<Path Stroke="Red M > 

<Path.Data> 
<PathGeometry> 
<PathFigure StartPoint="50,150" > 
<QuadraticBezierSegment 

Pointl="100,300" Point2="500,300" /> 
</PathFigure> 
</PathGeometry> 
</Path.Data> 
</Path> 

La courbe de Bezier ainsi definie (figure 8-3) : 

• demarre au point courant ou au point specifie dans l'attribut StartPoint de la balise 
PathFigure ; 

• se termine au point Point2 ; 
est attiree par le point Pointl. 

Figure 8-3 v 



Dans la balise Path, vous pouvez ajouter d'autres attributs (Fi 1 1 , par exemple) ainsi qu'un 
point de depart (proprietes attachees Canvas. Left et Canvas. Top). Pour dessiner plusieurs 
figures (pas necessairement plusieurs QuadraticBezierSegment), il sufht de placer une 
balise PathFigures dans la balise PathGeometry. 

Pour mieux comprendre, voyons comment sont creees les courbes de Bezier et, pour cela, 
il convient d'expliquer comment est cree chaque point de la courbe. 

Pour une courbe de Bezier avec un seul point d' attraction, S constitue le point de depart, 
E le point d'arrivee et C le point de controle (autrement dit, le point d'attraction, voir 
figure 8-4). Pour simplifier, nous supposons que la courbe de Bezier est construite en 
10 etapes (ce qui est evidemment insufhsant dans la pratique). Imaginons ensuite que 
nous tracons deux lignes droites : entre S et C pour la premiere ligne, entre E et C pour la 
seconde. Lors d'une etape (par exemple, 3 de 10), nous prenons un point au 3/10 le long 
de la ligne SC (le point A) et un autre au 3/10 le long de la ligne EC (le point B, voir 
figure 8-5). Nous joignons ensuite les points A et B et prenons le point qui se trouve au 3/10 
le long de la ligne AB, soit le point X, qui est un point (pour l'etape 3 de 10) de la courbe 



Les figures geometriques 

Chapitre 8 

de Bezier (figure 8-6). II suffit a present de joindre les points ainsi obtenus a chaque etape 
pour obtenir la courbe de Bezier. 



Figure 8-4 



C 



s 



Figure 8-5 
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Figure 8-6 




S 



Plutot simple, n'est-ce pas ? Bien sur, les mathematiciens ont une maniere bien plus 
impressionnante d'arriver au point X... 

Passons maintenant au PolyQuadraticBezierSegment qui consiste en une succession de 
Quad rati cBezierSegment. 



170 



Silverlight 2 



L'exemple de code suivant correspond au trace represents a la figure 8-7 : 



<Path.Data> 
<PathGeometry> 
<PathGeometry .Figures> 
<PathFigure StartPoint="50,50" > 
<PolyQuadraticBezierSegment 

Points="500,0 200,400 0,0 600,450" /> 
</PathFigure> 
</PathGeometry . Figures> 
</PathGeometry> 
</Path.Data> 
</Path> 



Deux courbes QuadraticBezierSegment ont ete definies. La premiere presente les caracte- 
ristiques suivantes : 

• elle demarre en (50, 50) ; 

• se termine en (200, 400) ; 

• est attiree par (500, 0). 

La seconde courbe presente quant a elle les caracteristiques suivantes : 

• elle demarre en (200, 400) qui est le point courant apres avoir dessine la courbe prece- 
dente, 

• se termine en (600, 450) ; 

• est attiree par le point (0, 0). 



<Path Stroke="Red" 



> 



Figure 8-7 
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Dans un programme, l'attribut Points de PolyQuadraticBezierSegment consiste en un 
tableau de Points, autrement dit un Point[]. Chaque courbe du PolyQuadraticBezierSeg- 
ment utilise deux entrees dans les valeurs de l'attribut Points : la premiere pour le point 
d' attraction et la seconde pour le point terminal, qui devient le point de depart de la 
prochaine courbe. 

Presentons maintenant le BezierSegment, qui est une courbe de Bezier avec deux points 
d' attraction. L'exemple de code suivant correspond au trace represents a la figure 8-8 : 

<Path Stroke="Red" > 

<Path.Data> 
<PathGeometry> 
<PathFigure StartPoint="50.150" > 
<BezierSegment 

Pointl="100,300" Point2="400,400" 
Point3="500,300" /> 
</PathFigure> 
</PathGeometry> 
</Path.Data> 
</Path> 



La courbe de Bezier ainsi definie : 

• demarre au point courant ou au point specifie dans Start Point de labalise Path Figure ; 

• se termine au point Point3 ; 

• est attiree par les points de controle Poi ntl et Poi nt2. 

La aussi, pour mieux comprendre, voyons comment est creee une courbe de Bezier avec 
deux points d' attraction. Considerons que S est le point de depart, E le point d'arrivee et 
que C et D sont des points de controle. Pour simplifier, prenons le cas d'une courbe de 
Bezier construite en 10 etapes. Imaginons ensuite que nous tragons trois lignes droites : 
une entre S et C (la ligne SC), une autre entre C et D (la ligne CD) et une troisieme entre 
D et E (la ligne CE). Lors de l'etape 3 (3 de 10), nous prenons un point au 3/10 le long de 
la ligne SC (le point P), un autre au 3/10 le long de la ligne CD (le point Q) et un dernier 
au 3/10 le long de la ligne DE (le point R). Nous tragons ensuite des lignes entre 
les points P et Q (ligne PQ) et Q et R (ligne QR). Le long de ces lignes, nous prenons 
des points au 3/10, soit les points F et G. Nous tragons ensuite la ligne FG et prenons un 



Figure 8-8 
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point (X) au 3/10 le long de cette ligne. Le point X appartient a la courbe BezierSegment 
pour l'etape 3 de 10 (figure 8-9). 

Figure 8-9 



D 




Le PolyBezierSegment est semblable dans son principe au PolyQuadraticBezierSegment : il 
contient une serie de BezierSegment. Dans l'attribut Points, il faut specifier une serie de 
trois points (deux points de controle et un point terminal) pour chaque courbe. Le point 
terminal d'une des courbes devient le point de depart de la courbe suivante. 

Le Stroke 

Pour tracer (peindre serait sans doute plus approprie) le contour de figures (rectangles, 
ellipses, etc.), il faut initialiser les attributs de la famille Stroke. II ne s'agit pas d'un attri- 
but general et de sous-attributs particuliers, mais bien d'une serie d'attributs, de Stroke a 
StrokeThi ckness. 

Le contour des figures est reellement peint a l'aide d'un pinceau (Sol idCol orBrush, 
LinearGradientBrush, RadialGradientBrush, ImageBrush ou encore VideoBrush) dont l'effet 
n'est generalement perceptible que sur des lignes epaisses. Par defaut, aucun contour 
n'est dessine. Si l'attribut Stroke est present, l'epaisseur du contour est de 1 pixel (valeur 
par defaut). Le tableau 8-4 presente les cinq principaux attributs de la famille Stroke. 

Lexemple de code suivant correspond au trace de la figure 8-10 : 

<Line Xl="20" Yl="20" X2="150" Y2="150" 
Stroke="Red" StrokeThi ckness=" 20" 
StrokeStartLi neCap="Tri angle" 
StrokeEndLineCap="Triangl e" /> 
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Figure 8-10 




Tableau 8-4 - Les cinq principaux attributs de la famille Stroke 



Nom de I'attribut 


Description 


Stroke 


Pinceau utilise pour peindre le contour d'une figure, tracer une ligne ou une courbe. 
Comme attribut XAML, il peut s'agir d'un nom de couleur ou d'une valeur exprimee dans 
les systemes sRGB ou scRGB. Stroke est un objet d'une classe derivee de Brush (voir 
chapitre 4). 


StrokeStartLineCap 


Indique comment commence une ligne (effet uniquement perceptible sur des lignes 
epaisses). Une des valeurs de I'enumeration Li neCap : Fl at (valeur par defaut, rien de 
special), Round (rond ajoute au debut de la ligne, de maniere a la lisser), Triangle (trian- 
gle ajoute au debut de la ligne) et Square (carre ajoute). 


StrokeEndLineCap 


Comme StrokeStartLineCap mais pour la fin de la ligne. 


StrokeLineJoin 


Jointure de lignes. Une des valeurs de I'enumeration : Bevel (angles biseautes), Miter 
(angles en forme de mitre d'eveque) et Round (angles arrondis). 


StrokeThickness 


Epaisseur, en pixels. Peut etre une valeur decimale (I'ceil percoit une difference entre 0.5 
et 1). 



Et le code suivant correspond a la figure 8-11: 

<Line Xl="20" Yl="150" X2="150" Y2="20" 
StrokeThickness="60" > 
<Line.Stroke> 
<ImageBrush ImageSource="Fleur. jpg" /> 
</Line.Stroke> 
</Line> 

Figure 8-11 
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Dans le premier exemple (figure 8-10), la ligne est peinte a l'aide d'un pinceau rouge. 
Dans le second exemple (figure8-l 1), le pinceau est plus complexe car il est base sur une 
image incorporee en ressource. II pourrait s'agir d'un pinceau a degrade lineaire ou radial, 
ou encore d'un pinceau base sur une image ou meme une video (ce qui est quand meme 
rare pour les contours). 

Pour creer des lignes en pointilles, utilisez la propriete StrokeDashArray, qui peut prendre 
une ou deux valeurs : une longueur de segment trace et une longueur d'espacement (par 
defaut, egale a la premiere valeur). 

L' exemple de code suivant correspond au trace represente a la figure 8-12 : 

<l_ine Stroke="Bl ack" 

StrokeThickness="5" StrokeDashArray="2" 
Xl="10" Yl="10" X2="200" Y2="10" /> 

Figure 8-12 __________ 



Et le code suivant, au trace de la figure 8-13 : 

<l_ine Stroke="Bl ack" 

StrokeThickness="5" StrokeDashArray="6 2" 
Xl="10" Yl="10" X2="200" Y2="10" /> 

Figure 8-13 ___. ___ J 

Le StrokeDashArray est un tableau d'une ou deux valeurs de type doubl e. Par programme, 
le code a ecrire en C# est : 

| 1 i .StrokeDashArray = new doublet] { 6, 2 }; 

et en VB : 

Dim tabDashO As Double = {6, 2} 
li .StrokeDashArray = tabDash 

Dessiner avec Expression Blend 

Supposons que Ton desire representer en XAML le poisson de la figure 8-14, en vue de 
le deplacer ou de l'animer. Celui-ci est forme d'une succession de lignes courbes, autre - 
ment dit de paths. Nous ne montrerons ici que les premiers pas, la suite n'etant qu'une 
repetition de ceux-ci. 

Les virtuoses de la tablette graphique n'auront aucun probleme a reproduire ce dessin a 
main levee. Pour les autres, la solution consiste a scanner ce dessin et a le reproduire par 
une succession de courbes XAML (des ellipses pour la partie centrale et l'oeil, et des courbes 
de Bezier pour le reste). 
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Figure 8-14 




Pour realiser le poisson de la figure 8-14, demarrez un projet sous Visual Studio et passez 
a Expression Blend. Pour rappel, il suffit pour cela d'effectuer un clic droit sur le nom du 
fichier XAML dans l'Explorateur de solutions et de selectionner le menu Open in 
Expression Blend. A noter qu'il est possible de demarrer en creant directement un projet 
avec Expression Blend (creer alors un projet Silverlight 2). Au cas oil l'outil Image n'est 
pas deja present dans la boite d'outils, cliquez sur l'icone symbolisant des chevrons 
fermants et double-cliquez sur l'icone Image (figure 8-15). 

Figure 8-15 




Placez ensuite l'image du poisson dans la surface de travail d'Expression Blend (cliquez 
sur l'outil Image dans la boite d'outils, puis sur la surface de travail) et redimensionnez-la 
de maniere a pouvoir travailler confortablement. Dans le panneau des proprietes, indiquez 
le nom du fichier contenant l'image dans le champ Source de l'onglet Common Properties. 
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Pour rappel, l'image doit etre incorporee en ressource ou etre copiee dans le repertoire 
CI i entBi n de la partie Web de 1' application. 




L'image sera supprimee par la suite ; pour le moment, elle vous aidera pour le trace. La 
figure 8-17 presente la surface de travail d'Expression Blend a ce stade de la creation du 
dessin. 

Creez maintenant un rectangle sur la surface de travail (prenez 1' habitude de selectionner 
au prealable le conteneur parent). Pour cela, cliquez sur l'outil Rectangle (a noter qu'en 
maintenant le bouton de la souris enfonce pendant une seconde, d'autres outils apparais- 
sent tels que Ellipse ou Ligne). Placez ce rectangle au meme emplacement que l'image et 
attribuez-lui les memes dimensions que cette derniere. Reglez ensuite la propriete 
Opacity a 0. L'image est maintenant visible mais vous allez dessiner sur le rectangle. 
Pour tracer des courbes, selectionnez l'outil Pen (figure 8-18) : le curseur de la souris 
affiche desormais un signe +. 

Cliquez ensuite sur deux points d' inflexion (le signe + du curseur se transforme en 
signe - si vous approchez d'un point deja selectionne, ce qui permet en cliquant dessus 
de le supprimer). Une ligne est alors tracee entre ces deux points (figure 8-19). Augmen- 
tez l'epaisseur (propriete StrokeThickness) de la ligne. 



Figure 8-17 




Figure 8-19 
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II s'agit maintenant d'incurver la ligne. Pour cela, appuyez sur la touche Alt et deplacez 
le curseur de la souris pres de la ligne (il se transforme alors en A ) . Faites glisser la souris 
pour donner a la ligne la courbure desiree : la courbe epouse desormais celle de la figure 
d'origine (figure 8-20). 

Figure 8-20 




Procedez de la meme maniere pour les autres courbes. A la fin, supprimez l'image 
d'origine ainsi que le rectangle (invisible). Pour cela, effectuez un clic droit sur la fenetre 
des objets (Objects window) et supprimez-les avec Delete. 

Une serie de paths vient d'etre creee. Pour les manipuler par programme, donnez-leur un 
nom (propriete Name dans le panneau des proprietes). 

II est possible de creer un Path simple a partir de plusieurs Path. Pour cela, selectionnez- 
les en cliquant dessus avec la touche Ctrl enfoncee et choisissez le menu Objects>Make 
Compound Path. 

Programmes d'accompagnement 

Exemple 1 : 

Creation et coloriage d'un clown (clic sur une couleur suivi d'un clic sur le personnage 
pour en colorier une partie). 

Figure 8-21 
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Exemple 2 : 

Logo anime. Des lignes se deplacent, s'agrandissent et se redressent pendant que le texte 
apparait progressivement en s'agrandissant. 

Figure 8-22 
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Exemple 3 : 

Trace d'une courbe de Bezier avec un seul point de controle. On peut deplacer les trois 
points a l'aide de la souris : la courbe de Bezier se redessine alors automatiquement. 

Figure 8-23 




Exemple 4 : 

Meme chose pour une courbe de Bezier a deux points de controle. 
Figure 8-24 
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Les transformations 

Au cours des chapitres precedents, nous avons vu comment placer des elements visuels 
dans une page Web Silverlight. Mais ceci est encore banalement traditionnel. . . 

Nous allons a present etudier les transformations qui vous permettront, par exemple, 
d'appliquer une rotation a un element UI. Pour cela, il suffit d'attribuer un nom a la trans- 
formation pour pouvoir agir sur celle-ci par programme, done en cours d'execution. 

L' etude des transformations nous menera tout naturellement aux animations. 

Le tableau 9-1 presente les differents types de transformations susceptibles d'etre appli- 
quees a un element visuel. 

Au lieu de specifier CenterX et CenterY (pour rappel, il s'agit de coordonnees relatives au 
composant mais exprimees en pixels), il est possible de notifier RenderTransformOrigin 
(en coordonnees relatives) dans la balise d'element. 

Ainsi, au lieu d'ecrire : 

<TextBlock Text="HELLO" FontSize="50" Width="120" Height="80" > 
<TextBl ock. RenderTransform> 

<RotateTransform Angle="45" CenterX="60" CenterY="40" /> 
</TextBl ock. RenderTransform> 
</TextBlock> 
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on peut ecrire : 

<TextBlock Text="HELLO" FontSize="50" Width="120" Height="80" 
RenderTransf ormOrigine="0. 5, 0.5" > 
<TextBlock. RenderTransform> 
<RotateTransform Angle="45" /> 
</TextBl ock. RenderTransf orm> 
</TextBlock> 



Tableau 9-1 - Les differents types de transformations 



Nom de la transformation 


Description 


Transl ateTransform 


L'element Ul est deplace de X pixels le long de I'axe des X et de Y pixels le long de 
I'axe des Y. X etY sont des attributs de Transl ateTransform. Par exemple (ici, un 
rectangle mais il pourrait s'agir de n'importe quel element Ul) : 

<Rectangle > 

< Rect a ngl e. RenderTransf orm> 
<Transl ateTransform X="100" Y="50" /> 
</Rectangl e. RenderTransform> 
</Rectangl e> 

Cette solution est generate et s'applique quel que soit le conteneur, ce qui n'est pas 
le cas de la modification directe par Canvas . Left et Canvas .Top (solution uniquement 
possible si le conteneur est un canevas). 


Seal eTransform 


L'element Ul est agrandi ou retreci, comme specifie dans les attributs ScaleX et 
Seal eY : Width est multiplie par Seal eX et Height par Seal eY. La mise a I'echelle 
est realisee (dans toutes les directions) a partir du point (CenterX, CenterY). Par 
defaut, il s'agit du point (0, 0), qui correspond au coin super ieur gauche. 
ScaleX et/ou ScaleY peuvent etre negatifs, ce qui cree un effet de miroir (voir 
exemples ci-dessous). 


RotateTransf orm 


L'element Ul subit une rotation, dont Tangle (attribut Angl e) est mesure en degres, 
dans le sens des aiguilles d'une montre. La rotation est operee autour d'un point 
specifie par CenterX et CenterY (voir les exemples ci-dessous ou I'ellipse noire du 
second exemple est presente uniquement pour montrer le point de rotation, qui est 
par defaut le coin superieur gauche). Les coordonnees CenterX et CenterY sont 
relatives au composant mais exprimees en pixels. 


SkewTransform 


Transformation qui provoque un effet oblique le long de I'axe des X et/ou I'axe des 
Y. Un carre peut ainsi devenir un parallelogramme. 


TransformGroup 


Permet de combiner plusieurs transformations. Par exemple : 
<TextBlock > 
<TextBl ock. RenderTransf orm> 
<TransformGroup> 
<RotateTransform Angle="45" /> 
<Transl ateTransform X="100" /> 
</TransformGroup> 
</TextBl ock. RenderTransf orm> 
</TextBlock> 


MatrixTransf orm 


La transformation est definie par une matrice (voir plus loin). 
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Les extraits de code suivants correspondent a des exemples de transformations sur le 
texte « Hello ». 

Effet miroir sur du texte (figure 9-1) : 

<TextBlock Text="HELLO" FontSize="20" > 
<TextBl ock. RenderTransf orm> 
<ScaleTransform ScaleX="-l" 

CenterX="31" CenterY="15" /> 
</TextBl ock. RenderTransform> 
</TextBlock> 

Figure 9-1 
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Rotation (figure 9-2) : 

<Ellipse Canvas . Left="195" Canvas .Top="195" 

Width="10" Height="10" Fill="Black" /> 
<TextBlock Canvas . Left="200" Canvas .Top="200" 
Text="HELLO" FontSize="20" > 
<TextBl ock. RenderTransf orm> 
<RotateTransform Angle="45" /> 
</TextBl ock. RenderTransform> 
</TextBlock> 



Figure 9-2 



Effet oblique (figure 9-3) : 



<TextBlock Text="HELLO" FontSize="20" > 

<TextBl ock. RenderTransf orm> 
<SkewTransform AngleX="25" /> 

</TextBl ock. RenderTransform> 
</TextBlock> 



Figure 9-3 



Les exemples suivants correspondent a des transformations appliquees a une image 
(figure 9-4) dont le code XAML est : 

<StackPanel > 
<Image Source="TM. jpg" Width="360" Height="300" /> 
</StackPanel> 



Effet miroir (figure 9-5) 



j <StackPanel> 

<Image Source="TM. jpg" Width="360" Height="300" 
<Image Source="TM. jpg" Width="360" Height="300 
<Image. RenderTransform> 
<ScaleTransform ScaleY="-l" CenterY="150" /> 
</ Image. RenderTransform> 
</Image> 
</StackPanel> 

Figure 9-5 
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Effet miroir et degrade de transparence (figure 9-6) : 
<StackPanel> 

<Image Source="TM. jpg" Width="360" Height="300"/> 
<Image Source="TM. jpg" Width="360" Height="300"> 
<Image. RenderTransform> 
<ScaleTransform ScaleY="-l" CenterY="150" /> 
</ Image. RenderTransform> 
<Image.OpacityMask> 
<LinearGradientBrush StartPoint="0.1" 
EndPoint="0,0" > 
<GradientStop Offset="0" Color="Black" /> 
<GradientStop 0ffset="0.8" Color="Transparent" /> 
</LinearGradientBrush> 
</ Image. OpacityMask> 
</Image> 
</StackPanel> 



Figure 9-6 
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Effets precedents auxquels un effet oblique a ete ajoute (figure 9-7) : 

<StackPanel" > 
<Image Source="TM. jpg" Width="360" Height="300" > 
< Image. RenderTransform> 
<SkewTransform AngleY="5" /> 
</ Image. RenderTransform> 
</Image> 

<Image Source="TM. jpg" Width="360" Height="300" > 
< Image. RenderTransform> 
<TransformGroup> 
<ScaleTransform ScaleY="-l" CenterY="150" /> 
<SkewTransform AngleX="-10" AngleY="5" /> 
</TransformGroup> 
</ Image. RenderTransform> 
<Image.OpacityMask> 
<LinearGradientBrush StartPoint="0, 1" 
EndPoint="0,0" > 
<GradientStop Offset="0" Color="Black" /> 
<GradientStop 0ffset="0.8" Col or="Transparent" /> 
</LinearGradientBrush> 
</ Image. OpacityMask> 
</Image> 
</StackPanel> 



Figure 9-7 
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Effets precedents auxquels un cadre a ete ajoute (figure 9-8) : 
<StackPanel > 

<Border BorderBrush="Bl ack" BorderThickness="5" 
Width="370"> 
<Border . RenderTransf orm> 
<SkewTransform AngleY="5" /> 
</Border. RenderTransf orm> 

<Image Source="TM. jpg" Width="360" Height="300" /> 
</Border> 

<Border BorderBrush="Bl ack" BorderThickness="5" 
Width="370" Height="300" > 

<Border . RenderTransf orm> 
<TransformGroup> 
<Scal eTransform ScaleY="-l" CenterY="150" /> 
<SkewTransform AngleX="-10" AngleY="5" /> 
</TransformGroup> 
</ Border . RenderTransf orm> 
<Border.OpacityMask> 
<LinearGradientBrush StartPoint="0,l" 



<GradientStop Offset="0" Col or="Bl ack" /> 
<GradientStop 0ffset="0.8" Color="Transparent" /> 
</LinearGradientBrush> 
</ Border. OpacityMask> 

<Image Source="TM. jpg" Width="360" Height="300" /> 
</Border> 
</StackPanel> 



EndPoint="0,0"> 



Figure 9-8 
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Une transformation peut etre definie par une transformation particuliere (comme Rotate- 
Transform) ou un groupe de transformations mais aussi, en termes mathematiques, par 
une matrice. 

Le calcul matriciel nous apprend qu'un point (X, Y) peut etre transforme en un point (A, B) 
par T operation matricielle suivante : 

■ A = X*M11 + Y*M21 + deplX 
B = X*M12 + Y*M22 + deplY 

MatrixTransform est definie par : 

<MatrixTransform Matr1x="Mll. M12, M21, M22, deplX, deplY" /> 

oil Mil, M12, M21, M22, deplX et deplY doivent etre remplaces par des valeurs. 

Pour deplacer un rectangle de 100 pixels a gauche, il faut appliquer la transformation 
suivante : 

<Rectangle > 

<Rectangl e . RenderTransf orm> 
<MatrixTransform Matrix="l, 0, 0, 1, -100, 0 " /> 

</Rectangl e. RenderTransf orm> 
</Rectangl e> 

Et pour realiser un effet de miroir autour du bord superieur : 
<MatrixTransform Matrix="l, 0, 0, -1, 0, 0 " /> 

Forcer une transformation par programme 

Les transformations peuvent etre initiees par programme. Si vous attribuez un nom 
interne (ici, rotText) a labalise RotateTransform : 

<TextBlock x:Name="info" Text="HELL0" > 

<TextBl ock. RenderTransf orm> 
<RotateTransform x: Name=" rotText" Angle="45" /> 

</TextBl ock. RenderTransf orm> 
</TextBlock> 

le texte subit une rotation supplementaire (ici, de 10 degres) chaque fois que Ton 
execute : 

rotText. Angle += 10; 

Le texte subit une rotation autour du point (CenterX, CenterY), qui est par defaut le coin 
superieur gauche. Pour le faire tourner autour du centre du texte, executez au prealable : 

rotText. CenterX = info.ActualWidth / 2; 
rotText. CenterY = info.ActualHeight / 2; 

Une autre solution consiste a specifier RenderTransform0rigin="0.5, 0.5" dans la balise 
TextBlock (jusqu'ici, cela parait simple) mais il faut alors aussi specifier Width et Height 
dans cette balise (ce qui depend du texte et de la police). 
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Meme si une balise d'element UI ne contient aucune balise RenderTransform, il est possible 
de forcer une transformation par programme. 

Pour illustrer notre propos, partons de la balise suivante : 

<TextBlock x:Name="za" Text="HELLO" /> 

et forcons une transformation par programme. En C#, cela donne : 

RotateTransform rt = new RotateTransformt ) ; 

rt. Angle = 90; 

za . RenderTransform = rt; 

Et en VB : 

I Dim rt As RotateTransform = New RotateTransform( ) 
rt. Angle = 90 
za . RenderTransform = rt 

A la section « Le signal d'horloge (timer) » du chapitre 6, nous avons vu comment affi- 
cher l'heure en permanence, mais sous forme de texte. Nous allons a present afficher 
l'heure au moyen d'une horloge dont les aiguilles tournent (l'image de l'horloge a ete 
inseree en ressource de 1' application Silverlight, voir figure 9-9). 

Figure 9-9 




Le code XAML pour realiser cela est le suivant : 

<Canvas x:Name="horl " Width="200" Height="200" Loaded="horl_Loaded" > 
<Image Source="Horloge. jpg" Width="200" Height="200" /> 

<!-- aiguille des heures --> 

<Path Data="M100,96 165,4 1-65,4 z" Fill="Black" > 

<Path. RenderTransform> 
<RotateTransform x:Name="rotHeure" CenterX="100" CenterY="100" /> 

</Path. RenderTransform> 
</Path> 

<!-- aiguille des minutes --> 

<Path Fill="Black" Data="M100 ,98 180,2 1-80,2 z" > 

<Path. RenderTransform> 
<RotateTransform x:Name="rotMin" CenterX="100" CenterY="100" /> 

</Path. RenderTransform> 
</Path> 



190 



Silverlight 2 



<!-- aiguille des secondes --> 
<Rectangle Fill="Black" Width="85" Height="2" 
Canvas. Left="99" Canvas .Top="99" > 
<Rectangle.RenderTransform > 

<RotateTransform x: Name="rotSec" CenterX="l" CenterY="l" /> 
</Rectangl e. RenderTransform> 
</Rectangl e> 
</Canvas> 

ce qui donne en C# : 

using System. Windows. Threading; 



private void horl_Loaded(object sender, RoutedEventArgs e) 

{ 

Di spatcherTimer timer = new DispatcherTimert); 
timer. Interval = new TimeSpan(0, 0, 1); 
timer. Tick += new EventHandler(timer_Tick) ; 
MettreAJourHorl oge( ) ; 
timer. Start( ) ; 

} 

void timer_Tick(object sender, EventArgs e) 

{ 

MettreAJourHorl oge( ) ; 

} 

void MettreAJourHorl oge( ) 

{ 

int sec = DateTime. Now. Second; 

int min = DateTime. Now. Minute; 

int heure = DateTime. Now. Hour % 12; 

rotSec. Angle = sec * 6 - 90; // 6 degres par seconde 

rotMin. Angle = min * 6 - 90; // 6 degres par minute 

rotHeure. Angle = heure * 30 - 90; // 30 degres par heure 

} 

et en VB : 

Imports System. Windows .Threading 



Private Sub horl_Loaded(ByVal sender As System. Object, 

ByVal e As System. Windows. RoutedEventArgs) 

Dim timer As New DispatcherTimert) 

timer. Interval = New TimeSpan(0, 0, 1) 

AddHandler timer. Tick, AddressOf timer_Tick 

MettreAJourHorl oge( ) 

timer. Startt ) 
End Sub 

Private Sub timer_Tick(ByVal sender As Object, ByVal e As EventArgs) 
MettreAJourHorl oge( ) 
End Sub 



Les transformations et les animations 

Chapitre 9 



Private Sub MettreAJourHorl oge( ) 
Dim sec As Integer = DateTime. Now. Second 
Dim min As Integer = DateTime. Now. Minute 
Dim heure As Integer = DateTime. Now. Hour Mod 12 
rotSec. Angle = sec * 6 - 90 '6 degres par seconde 
rotMin. Angle = min * 6 - 90 '6 degres par minute 
rotHeure. Angle = heure * 30 - 90 '30 degres par heure 

End Sub 



Les animations 

Les animations From-To 

Les animations figurent parmi les fonctionnalites les plus puissantes offertes par Silverlight. 
Elles sont definies en XAML mais peuvent aussi etre creees et/ou manipulees par 
programme (pour demarrer une animation, l'arreter ou en modifier les parametres). Avec 
cette technique, il suffit de demander a Silverlight de faire passer un element UI d'un etat a 
un autre en un nombre defini de secondes (y compris les fractions de seconde). Nul besoin 
de fournir des informations intermediaires souvent compliquees a calculer car Silverlight 
effectue tous les calculs intermediaires a votre place. 

Pour commencer, nous allons realiser une animation tres simple : agrandir une image en 
une fraction de seconde (mais avec une phase d'agrandissement bien perceptible) quand 
la souris entre dans la surface de l'image (evenement MouseEnter). 

Pour cela, il convient tout d'abord de specifier une transformation (ici, une mise a 
l'echelle par Seal eTransform) pour l'image et de traiter l'evenement MouseEnter : 

<Image x:Name="imgElle" Source="Elle.jpg" Width="264" Height="140" 
MouseEnter="imgEl le_MouseEnter" > 
<Image. RenderTransform> 

<Scal eTransform x:Name="scaleElle" CenterX="132" CenterY="70" /> 
</ Image. RenderTransform> 
</Image> 

On pourrait deja ecrire la fonction imgEl le_MouseEnter qui contiendrait : 

scaleElle.ScaleX *= 1.5; scaleElle.ScaleY *= 1.5; 

mais l'agrandissement serait instantane. Nous allons done le rendre progressif a l'aide 
d'une animation et, pour cela, nous allons devoir ecrire un story-board (constitue d'une 
ou de plusieurs animations). Ici, les proprietes (de type decimal et plus precisement 
Doubl e) Seal eX et Seal eY de la transformation seal eEl 1 e vont done etre animees. Le story- 
board doit etre compris dans une balise Resources de son conteneur. 

Dans la mesure oil les valeurs animees sont de type Double, il s'agit ici d'une animation 
de type Doubl eAnimation (les autres types etant PointAnimation et ColorAnimation). En attribut 
de la balise Doubl eAnimation, il convient done de specifier : 

• l'element concerne (attribut Storyboard.TargetName), ici seal eEl le ; 
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• la propriete concernee (propriete Storyboard.TargetProperty), ici Seal eX pour la premiere 
balise, et DoubleAnimation et ScaleY pour la seconde (il y a en effet deux proprietes a 
animer) ; 

• la valeur de Seal eX (Seal eY pour l'autre animation) qui doit passer de 1 a 1.5 : proprietes 
From et To, bien que From soit optionnelle (on part alors de la taille de l'image au moment 
d'executer Begin qui demarre 1' animation) ; 

• que l'animation doit etre realisee en une demi-seconde : propriete Duration, dont la 
valeur est une chaine de caracteres au format h h : mm : s s . mmm (avec h h pour les heures, mm 
pour les minutes, ss pour les secondes et mmm pour les millisecondes). 

Le code suivant permet d'agrandir une image sur MouseEnter : 

<Grid x:Name="LayoutRoot" > 

<Grid. Resources> 
<Story board x:Name="stbAgrandi r Image" > 
<DoubleAnimation From="l" To="1.5" Duration="0:0:0.500" 
Storyboard.TargetName="scaleEl le" 
Storyboard.TargetProperty="Scal eX" /> 
<DoubleAnimation From="l" To="1.5" Duration="0:0:0.500" 
Storyboard.TargetName="scaleEl le" 
Storyboard.TargetProperty="Scal eY" /> 

</Storyboard> 
</Grid.Resources> 



<Image x: Name="imgEl 1 e" Source="Elle.jpg" Width="264" Height="140" 

MouseEnter="imgEl 1 e_MouseEnter" RenderTransform0rigin="0.5, 0.5" > 
< Image. RenderTransform> 
<Scal eTransform x:Name="scaleElle" /> 
</ Image. RenderTransform> 
</Image> 
</Grid> 

L'animation aurait egalement pu etre definie en ressource de l'image : 

<Image x: Name="imgEl 1 e" Source="Elle.jpg" Width="264" Hei ght="140" 

MouseEnter="imgEl 1 e_MouseEnter" RenderTransform0rigin="0.5, 0.5" > 
<Image.Resources> 

<Story board x: Name="stbAgrandi r Image "> 
<DoubleAnimation From="l" To="1.5" Duration="0:0:0.500" 
Storyboard.TargetName="scaleEl le" 
Storyboard. Target Property = "Seal eX" /> 
<DoubleAnimation From="l" To="1.5" Duration="0:0:0.500" 
Storyboard.TargetName="scaleEl le" 
Storyboard. Target Property =" ScaleY" /> 

</Storyboard> 
</Image.Resources> 
< Image. RenderTransform> 

<Scal eTransform x:Name="scaleElle" CenterX="132" CenterY="70" /> 
</ Image. RenderTransform> 
</Image> 
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A ce stade, il ne reste plus qu'a lancer l'animation dans la fonction imgEl 1 e_MouseF_nter : 

stbAgrandi r Image. Begin ( ) ; 

Sur un story-board, on peut executer Begin (pour demarrer l'animation) et Stop (pour 
l'arreter) mais aussi Pause (pour la suspendre) et Resume (pour la reprendre). 

A la fin de l'animation, l'evenement Completed est signale. L'attribut Completed (ayant 
pour valeur le nom de la fonction de traitement) peut etre specirie dans une balise Story- 
board ou une balise DoubleAnimation (plus precisement une des trois balises xyzAnimation, 
voir tableau 9-2). 

Tableau 9-2 - Les differentes balises xyzAnimation 
Nom de la balise Description 

Doubl eAni mati on Permet d'animer une propriete de type decimal (petit rappel : les valeurs telles que Width, etc. 
sont de type decimal, doubl e meme et non entier). 

PointAnimation Permet d'animer une propriete de type Point. 

ColorAnimation Permet d'animer une couleur (plus precisement, un Sol idCol orBrush dans une propriete 
Fi 1 1 ou GradientStop). 



L'exemple de code suivant permet de realiser une animation sur couleur (un rectangle est 
peint de bleu en jaune de maniere perpetuelle en trois secondes) : 

<Storyboard x: Name="anim" RepeatBehavior="Forever" > 
<Col orAnimation Storyboard. TargetName="rcCol " 

Storyboard. Target Property = "Col or" Duration="0:0:3" 
From="Blue" To="Yellow" AutoReverse="True" /> 

</Storyboard> 



<Rectangle x:Name="rc" Width="200" Height="150" 
Canvas. Left="100" Canvas .Top="100" > 
<Rectangle.Fill> 
<SolidColorBrush x:Name="rcCol " /> 
</Rectangle.Fill> 
</Rectangle> 

On aurait pu se passer de nommer la balise Sol idCol orBrush, a condition d'ecrire Target- 
Name et TargetProperty de la maniere suivante : 

<ColorAnimation 

Story boa rd.TargetName="rc" 

Story boa rd.TargetProperty="( Rectangle. Fill ) . (Sol idCol orBrush. Col or ) " /> 

La derniere ligne de code se lit: « dans la propriete Fill du Rectangle, prendre la 
propriete Col or du Sol idCol orBrush ». L'attribut Fi 1 1 doit alors etre present dans la balise 
Rectangl e. 

L'attribut TargetName aurait pu etre place dans la balise Storyboard puisque toutes les bali- 
ses d' animation (ici, une seule) se rapportent a la meme variable TargetName. 



194 



Silverlight 2 



Le tableau 9-3 presente les proprietes specifiees dans les balises xyzAnimation (xyz pour 
Double, Point ou Color) mais aussi dans la balise Storyboard (dans ce cas, les proprietes 
sont applicables a l'ensemble des animations du story-board). 



Tableau 9-3 - Les proprietes des balises xyzAnimation et Storyboard 



Nom de la propriete 


Description 


Aiitti[?quoi"co 
nULUI\CVCI oc 


Si AutoReverse vaut true, I'animation est jouee en sens inverse quand elle 
arrive a la fin. La duree de I'animation correspond en fait au double de la duree 
mentionnee dans Duration. 


Begi nTime 


Specifie le delai avant de demarrer une animation (vous pouvez ainsi demarrer 
une animation aussitot qu'une autre se termine ou arrive a un certain point). Pour 
le format voir Duration. 


Du rati on 


Duree de I'animation, au format hh:mm:ss.mmm (par defaut, une seconde, les 
millisecondes etant optionnelles). Du point de vue programmation, il s'agit d'un 
objet TimeSpan. 


Fi 1 1 Behavior 


Permet d'indiquer ce qu'il faut faire quand I'animation se termine. Fi 1 1 Behavi or 
peut contenir I'une des deux valeurs suivantes de Enumeration Fill Beha- 
vi or : HoldEnd (valeur par defaut qui correspond a « le dernier etat de I'anima- 

tifin recto OTTiono ..1 m t Q+^r^ foiiniin offinn^nQi 
UUII Icblc dIMUIIU »} UU JLUp (dULlIM dIMUIdyUJ. 


RepeatBehavi or 


Nombre de repetitions de I'animation. L'attribut RepeatBehavi or peut contenir : 
Forever ou nx, ou n designe le nombre de repetitions. Par defaut, I'animation 
n'est jouee qu'une seule fois (la fonction de traitement de I'evenement Compl e- 
ted etant executee lorsque I'animation se termine). Avec Forever, I'animation 
est jouee en permanence. 


Storyboard. Target Name 


Nom (propriete x:Name) de I'element anime. 


Storyboard. Target Property 


Propriete qui est animee. Une propriete attachee comme Canvas . Left doit etre 
specifiee entre parentheses. 


From 


Valeur initiale de la propriete animee. En I'absence de clause From, I'animation 
commence avec la valeur courante de la propriete. 


To 


Valeur finale de la propriete. 


By 


Au lieu de specifier une valeur To, vous pouvez specifier un increment (To pre- 
nant alors la valeur From + By). 



Le fait que certains attributs puissent etre specifies a la fois dans une balise Storyboard 
etdans une balise comme DoubleAnimation conduit parfois a une certaine confusion. Ann 
d'eclaircir les problemes que vous pourriez eventuellement rencontrer, nous allons 
animer deux rectangles, rcl et rc2, par simple deplacement horizontal. 

L'exemple de code suivant correspond a deux animations jouees en parallele sur 3 secondes : 

<Storyboard x:Name="stb" > 
<Doubl eAnimation Storyboard. TargetName="rcl" 
Storyboard.TargetProperty="( Canvas . Left)" 
From="l" To="300" Duration="0:0:3" /> 
<Doubl eAnimation Storyboard. TargetName="rc2" 
Storyboard.TargetProperty="( Canvas . Left)" 
From="l" To="300" Duration="0:0:3" /> 
</Storyboard> 
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Le code suivant correspond a deux animations jouees en decalage (la seconde demarre 
une seconde et demie apres la premiere) mais se terminant en meme temps : 

<Storyboard x: Name="stb" > 
<Doubl eAnimation Story boa rd.TargetName="rcl" 

Story boa rd.TargetProperty="( Canvas . Left) " 

From="l" To="300" Duration="0:0:3" /> 
<Doubl eAnimation Story boa rd.TargetName="rc2" 

Story boa rd.TargetProperty="( Canvas . Left)" 

BeginTime="0:0:1.5" 

From="l" To="300" Duration="0:0:1.5" /> 
</Storyboard> 

L'exemple suivant permet de repeter 1' animation. Le rectangle se deplace vers la droite 
en 3 secondes et revient a sa position initiale, egalement en 3 secondes, et ceci indefiniment : 

<Storyboard x: Name="stb" > 
<Doubl eAnimation Story boa rd.TargetName="rcl" 

Story boa rd.TargetProperty="( Canvas . Left) " 

From="l" To="300" Duration="0:0:3" 

AutoReverse="True" 

RepeatBehavior="Forever" /> 
</Storyboard> 

Le code suivant permet de specifier une duree dans Storyboard (l'animation s'arrete au 
bout de 10 secondes) : 

<Storyboard x:Name="stb" Duration="0:0:10" > 
<Doubl eAnimation Story boa rd.TargetName="rcl" 

Story boa rd.TargetProperty="( Canvas . Left) " 

FroiTF-l" To="300" Duration="0:0:3" 

AutoReverse="True" 

RepeatBehavior="Forever" /> 
</Storyboard> 

Enfin, le code suivant permet de specifier une duree et des repetitions dans Storyboard (le 
rectangle est deplace - vers la droite puis vers la gauche - durant 10 secondes, l'animation 
s'arrete ensuite pendant 4 secondes ; le cycle se repete ainsi 9 fois encore) : 

<Storyboard x:Name="stb" 
Duration="0:0:10" RepeatBehavi or="10x" > 

<Doubl eAnimation Story boa rd.TargetName="rcl" 
Story boa rd.TargetProperty="( Canvas . Left) " 
From="l" To="300" 

Duration="0:0:3" AutoReverse="True" /> 
</Storyboard> 



Les animations par key frames 

Jusqu'ici, pour chaque animation, nous donnions une position de depart (attribut optionnel 
From), une position d'arrivee (attribut To) et une duree. Avec les animations par keyframes, 
il est possible de specifier les differentes etapes par lesquelles doit passer 1' animation. 
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L'exemple de code suivant permet de faire varier la largeur d'un rectangle rouge : 

<Rectangle x:Name="rc" Width="200" Height="100" Fill="Red" > 
<Rectangl e. Resources> 
<Storyboard x:Name="stb" > 
<DoubleAnimationllsingKey Frames Story boa rd.TargetName="rc" 

Sto ry boa rd.TargetP rope rty=" Width" > 
<LinearDoubleKeyFrame KeyTime="0:0:0" Val ue="100" /> 
<LinearDoubleKeyFrame KeyTime="0:0:3" Value="400" /> 
<LinearDoubleKeyFrame KeyTime="0:0:5" Value="50" /> 
</Doubl eAnimationUsingKeyFrames> 
</Storyboard> 
</Rectangl e. Resources> 
</Rectangl e> 

Apres l'execution de stb.Begin( ), l'animation passe par les etapes suivantes : 

• la largeur du rectangle est de 100 pixels au temps 0 (demarrage de l'animation) ; 

• elle passe progressivement a 400 pixels en 3 secondes ; 

• elle revient a 50 pixels en 2 secondes. 

Avec une animation de type LinearDoubleKeyFrame, les mouvements ne sontpas acceleres 
mais continus. Ainsi, lorsque la largeur augmente progressivement de 100 a 400 pixels en 
3 secondes : elle passe a 200 au bout d'une seconde, a 300 au bout de 2 secondes et finale - 
ment a 400 au bout de 3 secondes. 

L'animation pourrait etre egalement de type DiscreteDoubleKey Frame. Pour expliquer la 
difference entre ces deux types, transformons l'animation precedente selon le code 
suivant : 

<Rectangle x:Name="rc" Width="200" Height="100" Fill="Red" > 
<Rectangl e. Resources> 
<Storyboard x:Name="stb" > 
<DoubleAnimationUsing Key Frames Story boa rd.TargetName="rc" 

Sto ry boa rd.TargetP rope rty=" Width" > 
<DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="100" /> 
<DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="400" /> 
<DiscreteDoubleKeyFrame KeyTime="0:0:5" Value="50" /> 
</Doubl eAni mat ionUsingKey Frames) 
</Storyboard> 
</Rectangl e. Resources> 
</Rectangl e> 

Au debut de l'animation, la largeur du rectangle etait de 100 pixels. Au bout de 3 secondes, 
elle passe brusquement a 400 et, 2 secondes plus tard, tout aussi brusquement a 50. 

Avec les animations de type Spl i neDoubl eKey Frame, il est possible d'accelerer ou de ralentir a 
l'approche des etapes. Voyons cela avec Expression Blend. 
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Les animations avec Expression Blend 

Prenons l'exemple suivant (figure 9-10) : un bouton Start est place dans le coin superieur 
gauche de la grille. Un clic sur ce bouton lancera 1' animation qui consistera en un depla- 
cement de balle (decrivant une ellipse). Depuis Visual Studio, passez a Expression Blend 
en cliquant droit sur le nom du fichier XAML>Ouvrir dans Expression Blend. 



Figure 9-10 



j^J TestAnim.»ln - Microsoft Depression Blend 2.5 June 2008 Preview — 




L'espace de travail etant assez restreint, reorganisez les differents panneaux au moyen de 
la touche F6 ou du menu Window>Active Workspace (figure 9-11). 

Vous allez a present animer une balle. Pour cela, il convient tout d'abord de la creer. Si 
l'outil Ellipse n'apparait pas dans la boite d'outils, cliquez sur l'outil Rectangle jusqu' a 
1' apparition du panneau Rectangle, ellipse et ligne. Selectionnez alors l'outil Ellipse (il 
apparait desormais dans la boite d'outils) et cliquez sur la surface de travail. Positionnez 
correctement l'ellipse et donnez-lui la taille adequate (appuyer sur la touche Maj tout en 
deplacant le curseur de la souris pour obtenir un cercle). Specifiez ensuite un fond rouge 
pour la balle (figure 9-12). De la routine deja. . . 
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Figure 9-11 
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Les transformations et les animations | 

Chapitre 9 | 

Vous allez a present creer un story-board. Pour cela, cliquez sur le signe + du panneau 
Objects and Timeline (figure 9-13). 



Figure 9-13 




Expression Blend vous demande alors de specifier un nom (attribut x: Name) pour le story- 
board (ici, stb). 
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Le panneau Objects and Timeline change alors completement d'aspect et comporte a 
droite des lignes verticales, dites de temps (figure 9-14). Par defaut, les lignes de temps 
sont placees a une, deux, trois, etc., secondes mais rien ne vous empeche d'en ajouter 
d'autres, a intervalles plus rapproches. 



Figure 9-14 




Les transformations et les animations 

Chapitre 9 

Cliquez sur la ligne de temps placee a une seconde. Un petit cercle rouge apparait alors 
a gauche du nom interne de l'animation (ici, stb) dans le panneau Objects and Timeline ; 
il indique qu'Expression Blend est pret a enregistrer vos operations (animation de la 
premiere seconde). Deplacez la balle rouge en haut de la grille, puis cliquez sur la ligne 
de temps placee a deux secondes (figure 9-15). 



Figure 9-15 
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Deplacez ensuite la balle vers un autre point (ici, plus bas et a droite) pour specifier 
l'animation a la deuxieme seconde (figure 9-16). 



Figure 9-16 




II est deja possible de visualiser l'animation en cliquant sur la ligne de temps placee a 
zero seconde (ou a n'importe quel moment de l'animation), puis sur le bouton Play 
(symbolise par un triangle pointant vers la droite). La balle monte dans la premiere 
seconde puis descend en oblique vers la droite dans la deuxieme seconde. 
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Pour le moment, le mouvement est continu et regulier (comme pour 1' animation de type 
LinearDoubleKeyFrame) mais il est possible de forcer des accelerations ou des ralentis aux 
approches. Pour cela, cliquez au centre d'une ligne de temps pour faire apparaitre le 
panneau Easing (figure 9-17). 
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Dans ce panneau, cliquez sur la courbe (allant du coin inferieur gauche au coin superieur 
droit) pour la deformer. La figure 9-18 presente les modifications effectuees pour que la 
balle parte lentement mais accelere a l'approche du point d'arrivee. 



Figure 9-18 




Les transformations et les animations 
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Programmes d'accompagnement 

Exemple 1 : 

Les yeux suivent les mouvements de la souris (figure 9-19). 
Figure 9-19 



Exemple 2 : 

Une loupe est deplacee au moyen de la souris et permet d'afficher (en agrandissant 
cinq fois) plus de details sur une partie de l'image de fond (figure 9-20). 
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Exemple 3 : 

Animation simulant le mouvement d'un piston (figure 9-21). 



Figure 9-21 



Piston en action 

Stop 




Exemple 4 : 

Animation montrant la progression d'un tri (figure 9-22). 

Figure 9-22 Generate numbers Sort 
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Exemple 5 : 

Animation montrant le mouvement d'un pendule balistique en fonction de la vitesse de la 
balle (figure 9-23). 

Figure 9-23 _ 

Pendule balistique 
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Les liaisons de donnees 



Dans ce chapitre, nous allons nous interesser a la liaison de donnees, c'est-a-dire a la 
connexion automatique entre une source de donnees et un composant d'affichage, appele 
cible (target en anglais). 

Nous presenterons les concepts de base avec une zone d' edition TextBox et une zone 
d'affichage TextBl ock Nous passerons ensuite a la boite de liste et finalement a la grille de 
donnees avec communication bidirectionnelle entre la grille et la source de donnees 
(toute modification dans la grille etant repercutee dans la source de donnees). 

Tout au long de ce chapitre, les donnees proviendront de sources de donnees deja en memoire 
dans l'application Silverlight. Au chapitre 13, nous verrons comment obtenir des donnees 
en provenance de sources de donnees exterieures, notamment de services Web. 

Les liaisons de donnees avecTextBlock et TextBox 

Comme nous l'avons vu precedemment, le contenu des balises TextBl ock et TextBox est 
specifie dans l'attribut Text. Dans l'exemple de code suivant, (le contenu de la zone 
d' edition est initialise lors du chargement de la page) : 

<TextBox x:Name="ze" Text="Victor Hugo" /> 

Nous allons faire en sorte que le libelle ne soit plus code « en dur » dans la balise mais 
qu'il provienne d'une source de donnees. Nous montrerons d'abord comment effectuer 
une liaison simple (qui n'est realisee qu'une seule fois), puis une liaison suivie (le contenu 
de la zone affichee change si la source de donnees est modifiee) et finalement une liaison 
bidirectionnelle (toute modification de la zone d' edition etant alors automatiquement 
repercutee dans la source de donnees). 
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Partons d'un exemple tres simple, que nous allons progressivement compliquer. Dans la 
classe Page de l'application Silverlight, il convient tout d'abord de definir une propriete 
en lecture seule : 

public string Norn { getfreturn "Emile Zola";}} 

Cela fait, la zone d' edition ze doit ensuite etre liee a cette source de donnees. Pour cela, 
la balise TextBox doit devenir : 

<TextBox x:Name="ze" Text="{Binding Norn}" /> 

Mais cela ne suffit pas. II faut encore indiquer a la zone d'edition quel est son « contexte de 
donnees », autrement dit l'objet contenant la propriete Norn. Ici, il s'agit de l'objet « page 
de l'application Silverlight ». Dans le fichier Page .xaml . cs, le mot reserve thi s fait reference 
a cet objet (en VB, le mot reserve Me fait reference a cet objet dans le fichier Page . xaml . vb) : 

ze.DataContext = this; 

Cette instruction est generalement executee dans la fonction qui traite l'evenement Loaded 
adresse au conteneur mais cette liaison de pourrait etre effectuee apres, a n'importe quel 
moment. 

Dans un cas aussi simple, nous avons surtout complique les choses ! Rapprochons-nous 
progressivement des cas reels et, surtout, travaillons plus proprement en separant les 
donnees de leur presentation, ce qui est d'ailleurs le but principal du mecanisme de liaison 
de donnees. La presentation des donnees sera ainsi traitee distinctement des operations 
effectuees sur celles-ci. 

Les donnees proviendront quasiment toujours d'un objet contenant diverses informations 
(il s'agira meme souvent d'un service Web qui rapatrie un tel objet d'un serveur distant). 
II convient done de creer une classe Produi t tres simple puisque limitee a la propriete Nom. 
Pour cela, effectuez un clic droit sur le nom du projet (partie Silverlight) dans l'Explora- 
teur de solutions et selectionnez Ajouter>Nouvel element. . .>Classe. Soit Produi t . cs (ou 
Produi t.vb) le fichier contenant cette classe : 

public class Produit 
public string Nom {get; set;} 

En C#, il s'agit de la forme simplified qui devait autrefois s'ecrire comme suit (une 
propriete ressemble a un champ public et s' utilise comme tel mais les instructions dans le 
get sont automatiquement executees pour obtenir sa valeur tandis que les instructions 
dans le set sont automatiquement executees pour modifier son contenu) : 

public class Produit 
{ 

private string nom; 
public string Nom 
{ 

get {return nom;} 
set {nom=value;} 

} 

} 
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Dans la fonction traitant l'evenement Loaded du conteneur, par exemple, un produit est 
ensuite cree puis associe a la zone d'edition. Le code correspondant suivant est conforme 
a la nouvelle syntaxe, introduite en version 3, qui permet d'initialiser un objet par initia- 
lisation de ses proprietes et ainsi d'eviter de devoir creer un constructeur : 

Produit prod; // variable de la page 



prod = new ProduitO {Nom="Ci rage" } ; 

ze.DataContext = prod; // on specifie le contexte de la zone d'edition 

Ci rage est maintenant affiche dans la zone d'edition au demarrage de 1' application. 

La liaison de donnees n'est ici effectuee qu'une seule fois, apres l'assignation d'un Produit 
dans ze.DataContext. II n'y a done pas (pour le moment) de suivi entre la source de 
donnees et la presentation de cette donnee dans la fenetre du navigateur. Une modification 
de l'objet prod n'a aucune repercussion sur la zone d'edition. 

Pour qu'il y ait suivi de la liaison, il faut modifier la classe Produi t et implementer l'inter- 
face INotifyPropertyChanged (une interface indique les proprietes et fonctions qu'une 
classe doit implementer). En mentionnant qu'une classe implemente une interface, on 
force le programmeur a ecrire les fonctions specifiees dans l'interface (en respectant la 
signature de ces fonctions). Ces fonctions, a leur tour, vont provoquer l'execution de 
fonctions du systeme, qui, elles, provoquent l'effet desire. 

Dans la classe Produit modifiee, il faut : 

• declarer une variable d'un type bien determine, le type « evenement » ; 

• appeler la fonction associee a cette variable en cas de modification de la propriete. 

Dans la pratique, pour que la classe Produit implemente l'interface INotifyPropertyChanged, 
il faut la modifier comme suit : 

using System. ComponentModel ; 



public class Produit : INotifyPropertyChanged 

{ 

private string nom; 

public event PropertyChangedEventHandler PropertyChanged; 

public string Nom 

{ 

get {return nom;} 

set 

{ 

nom = value; 

if (PropertyChanged != null) 
PropertyChangedCthis, new PropertyChangedEventArgsC'Nom")) ; 

} 

} 

} 
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Analysons la classe Produit ainsi modifiee. Un objet Produit presente la propriete Norn. Le 
programme peut demander le Norn d'un Produit particulier. Ici, le Nom presente au monde 
exterieur est simplement le contenu du champ prive nom car les operations mentionnees 
dans le get se resument a un return. L'utilisateur d'un objet Produit ignore tout du fonc- 
tionnement interne de la classe Produit et ne « voit » que ses proprietes et fonctions 
publiques. Dans son fonctionnement interne, la classe Produit peut effectuer des opera- 
tions complexes (specifiees dans le get) pour rendre le Nom du Produit. 

Un Produit presente egalement un champ de type « evenement » (event en anglais). Ce 
champ contient initialement la valeur null mais le run-time Silverlight vient y specifier 
l'adresse d'une de ses fonctions au moment ou la liaison est effectuee. Pour ceux qui ont 
pratique le langage C et ses pointeurs, PropertyChanged peut etre assimile a un pointeur sur 
une fonction, autrement dit une variable qui contient l'adresse d'une fonction. II devient 
ainsi possible d'executer la fonction pointee via le pointeur. PropertyChangedEventHandl er 
donne des informations quant a la signature de la fonction pointee. 

Lorsque l'application Silverlight demande le Nom d'un Produit, les instructions du get 
sont executees et le code de la classe renvoie le contenu du champ prive nom (ce code 
execute pour cela les instructions du get). 

Lorsque cette application modifie le Nom d'un Produit, la nouvelle valeur (symbolisee par 
value) est copiee dans le champ prive nom (ici, c'est tout simple mais on pourrait trouver 
de nombreuses instructions dans la clause set). Mais ce n'est pas tout : si le champ de 
type « evenement » qu'est PropertyChanged a ete initialise (il Test par le run-time Silver- 
light, au moment de la liaison), il est different de nul 1 et PropertyChanged( ) a pour 

effet d'executer la fonction pointee. C'est cette fonction qui vient mettre a jour la cible 
(ici, la zone d'edition ze). 

Le mecanisme peut paraitre intimidant en premiere lecture mais il s'avere d'une rare 
elegance et d'une grande efficacite. Grace a lui, toute modification de la source de 
donnees (ici, le champ Nom d'un objet Produi t) est desormais automatiquement repercutee 
dans la zone d'edition ze. Pour le verifier, executez le code suivant : 

prod. Nom = "Rhubarbe" ; 

On peut a present affrrmer que la zone d'edition ze (la cible) et la source de donnees prod 
sont liees de maniere permanente mais dans une seule direction (OneWay), soit de la source 
a la cible. 

II est possible d'empecher ce suivi automatique. II suffit pour cela de reclamer une liaison 
OneTime (qui n'est done executee qu'une seule fois, lors de l'assignation du DataContext), 
ce qui se fait en modifiant la balise : 

<TextBox x:Name="ze" Text="{Binding Nom, Mode=OneTime} " /> 

Pour que la liaison devienne bidirectionnelle, autrement dit pour que toute modification 
de la zone d'edition soit repercutee dans la source de donnees, il suffit d'imposer le mode 
TwoWay : 

<TextBox x:Name="ze" Text="{Binding Nom, Mode=TwoWay } " /> 
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Si Ton dispose d'une liste de produits, il suffit de modifier le DataContext de la zone 
d' edition et de le faire correspondre a un produit particulier dans la liste pour modifier 
automatiquement la liaison. En fait, il suffit de modifier le DataContext du conteneur 
(generalement une grille) pour modifier automatiquement le DataContext de tous les 
elements UI enfants, ce qui simplifie encore les choses. 

En VB, la classe et la fonction traitant l'evenement Loaded s'ecrivent : 

Imports System. ComponentModel 
Public Class Produit 
Impl ements INoti fyPropertyChanged 
Private mNom As String 
Public Property NomO As String 
Get 
Return mNom 
End Get 

Set(ByVal value As String) 
mNom = value 

RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgsC'Nom")) 
End Set 
End Property 

Public Event PropertyChanged As PropertyChangedEventHandl er _ 
Impl ements INoti fyPropertyChanged. PropertyChanged 
End Class 



Private prod As Produit 

Private Sub LayoutRoot_Loaded(ByVal sender As System. Object, _ 

ByVal e As System. Windows. RoutedEventArgs) 

prod = New ProduitO With {.Norn = "Cirage"} 

ze. DataContext = prod 
End Sub 



Les boites de liste 

Les proprietes des boites de liste 

Une boite de liste permet d'afficher differents articles sur une seule colonne (voir 
figure 10-1), parmi lesquels l'utilisateur peut en selectionner un. Dans sa forme la plus 
simple, une boite de liste et ses donnees (ici, des chaines de caracteres) sont specifiers 
comme suit : 

<ListBox > 

<ListBoxItem Content="France" /> 

<ListBoxItem Content="Ital ie" /> 

<ListBoxItem Content="Al 1 emagne" /> 

<ListBoxItem Content="Bel gique" /> 

<ListBoxItem Content="Pays-Bas" /> 

<ListBoxItem Content="Luxembourg" /> 
</ListBox> 
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oil doit etre remplace par des attributs tels que Width, Height, Margin, Canvas. Left, 

Grid. Row, etc.). 

Figure 10-1 

Italie 

Allemagne 
Belgique 




Nous ne reviendrons pas sur les attributs de taille (Width, Height, MinWidth, MaxWidth, 
MinHeight et MaxHeight), de positionnement (Margin, Padding, Horizontal Al ignment, Verti- 
calAl ignment, Canvas. Left et Canvas. Right si le conteneur est un canevas) ou de presenta- 
tion (Opacity, Style, Cursor, etc.), proprietes qui sont maintenant bien connues ou seront 
bientot etudiees (dans le cas de Styl e). 

Si la boite de liste est un objet ListBox (classe derivee de U I Element), les articles eux- 
memes sont des objets de la classe ListBoxItem, elle aussi derivee de UI Element. C'est 
pour cette raison que les articles peuvent prendre n'importe quelle forme visuelle et ne 
sont pas du tout limites a des libelles sous forme de chaines de caracteres. 

Dans les balises ListBoxItem (pour chaque article done), il est possible de specifier des 
attributs comme Background et Foreground ainsi que ceux de la famille Font. Les articles 
peuvent etre des objets tels que des boutons ou des images et peuvent meme etre tout a 
fait differents d'un article a l'autre. 

L'exemple de code suivant correspondant a la boite de liste representee a la figure 10-2 : 

<ListBox > 

<TextBlock Text=" Italie" /> 
<Image Source="France. jpg" Margin="0,5"/> 
<Button Content="Al 1 emagne" /> 
</ListBox> 




Allemagne 



Le premier article est ici un libelle, le deuxieme une image et le troisieme un bouton. 



Les liaisons de donnees 

Chapitre 10 



Dans la mesure oil les libelles (par defaut) proviennent de balises Content, il est aise de 
modifier fondamentalement l'apparence des articles (voir chapitre 15). 

Voyons maintenant comment remplir dynamiquement la boite de liste et comment detec- 
ter des selections, avant de passer a la personnalisation plus avancee de la boite de liste. 

Remplir et modifier le contenu d'une boite de liste 

Des articles peuvent etre ajoutes ou supprimes en cours d'execution de programme. Par 
exemple (sans oublier que l'argument pourrait etre d'un autre type, comme une image ou 
un bouton) : 

1 bPays. Items .Add ( "Danemark" ) ; 

Le tableau 10-1 presente les fonctions pouvant etre appliquees a la propriete Items, qui 
represente une collection (de plusieurs object, done de n'importe quel type). 



Tableau 10-1 - Les operations susceptibles d'etre effectuees sur une collection 



Norn de la fonction 


Description 


Add(object) 


Ajoute un article en fin de liste. L'argument est bien de type object, ce qui permet 
d'inserer n'importe quel objet. 


ClearO 


Vide la collection. 


Count 


Propriete qui renvoie le nombre d'articles presents dans la boite de liste. 


Insertdnt pos, object) 


Insere un article a une position donnee par pos (0 pour la tete de la boite de liste). 


Remove(object) 


Supprime I'objet passe en argument. 


RemoveAt(int) 


Supprime I'article occupant la position passee en argument. 



Lors d'ajouts, meme de chaines de caracteres, les articles ne sont pas tries. Si une presen- 
tation ordonnee s'avere necessaire, il vous appartient d'effectuer le tri avant les ajouts. 
Par exemple (meme s'il aurait ete ici plus simple et plus efficace d'utiliser la propriete 

ItemsSource) : 

string[] ts = {"Portugal", "Suede", "Autriche"} ; 



Array .Sort(ts) ; 

for (int i=0; i<ts. Length; i++) lbPays . Items. Add(ts[i ]) ; 
Ce qui s'ecrit en VB : 

Dim ts() As String = {"Portugal", "Suede", "Autriche"} 



Array .Sort(ts) 

For i As Integer = 0 To ts. Length - 1 

lbPays. Items. Add(tsO')) 
Next i 
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Des articles deja plus elabores (ici, avec une couleur d'afnchage) peuvent etre inseres de 
cette maniere : 

ListBoxItem liBleu = new ListBoxItem( ) ; 

liBleu. Content = "Bleu"; liBleu. Foreground = new Sol idCol orBrush(Col ors .Bl ue) ; 
lb. Items. Add(liBleu); 

ListBoxItem li Rouge = new Li stBoxItem( ) ; 
liRouge. Content = "Rouge"; 

liRouge. Foreground = new SolidColorBrush(Colors.Red); 
1 b. Items. Add( liRouge); 

Au moment de l'ajout, la boite de liste garde une reference a 1' article passe en argument 
a Add. Toute modification de l'article (par exemple, 1 i Rouge), independamment de la boite 
de liste, a done une repercussion sur celui-ci. II est ainsi possible de modifier le libelle de 
1 i Rouge ou sa couleur d'affichage, meme apres insertion dans la boite de liste. 

Les articles peuvent provenir directement d'une collection. Pour cela, il suffit d'utiliser la 
propriete ItemsSource, qui correspond a une collection de donnees (tableau, liste generique, 
etc.) : 

lbPays. ItemsSource = ts; 

Retrouver /'article selectionne 

L'evenement SelectionChanged est signale quand l'utilisateur selectionne un article. Une 
selection est generalement operee par un simple clic mais elle peut aussi l'etre au moyen 
des touches de direction du clavier lorsque la boite de liste a le focus d' entree (dans ce 
cas, l'evenement est signale de maniere repetitive, pour des articles differents, tant que 
l'utilisateur garde une touche de direction enfoncee) : 

<ListBox x: Name="l bPays" SelectionChanged="lbPays_SelectionChanged" > 

</ListBox> 

En C#, la fonction de traitement s'ecrit : 

private void lbPays_SelectionChanged(object sender, SelectionChangedEventArgs e) 

{ 

} 

et en VB : 

Private Sub lbPays_SelectionChanged(ByVal sender As System. Object, _ 

ByVal e As System. Windows. Controls. SelectionChangedEventArgs) 

End Sub 

On pourrait s'attendre a ce que l'argument e, de type SelectionChangedEventArgs, donne 
acces a l'article selectionne. Ce sont en fait des proprietes de la boite de liste qui vont 
fournir ces informations. 
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La propriete Selectedlndex d'une boite de liste contient le numero d'ordre de l'article 
selectionne (0 pour le premier et — 1 si aucun article n'est selectionne) : 

n = lbPays. Selectedlndex; 

Si la boite de liste ne contient que des libelles, on retrouve le libelle de l'article selectionne 
en ecrivant le code C# suivant : 

ListBoxItent lbi = lbPays.Items[lbPays. Selectedlndex] as ListBoxItem; 
sPays = 1 bi .Content .ToString( ) ; 

ou 

ListBoxItem lbi = lbPays.Selectedltem as ListBoxItem; 
sPays = lbi .Content. ToStringO; 

ce qui donne en VB : 

Dim lbi As ListBoxItem = IbPays.Itemsdb. Selectedlndex) 
sPays = lbi .Content 

ou 

Dim lbi As ListBoxItem = lbPays.Selectedltem 
sPays = lbi .Content 

ou 1 bi prend la valeur nul 1 (Nothi ng en VB) si aucun article n'est selectionne. 



Cas des donnees provenant d'une liste d'objets 

Avec ItemsSource, les donnees peuvent provenir d'une collection de donnees. Nous allons 
a present compliquer la source de donnees en creant une classe ainsi qu'une liste d'objets. 
Le code correspondant en C# s'ecrit : 

public class Pers 
{ 

public string Norn { get; set; } 
public string Prenom {get; set;) 
public int AN { get; set; } 

} 



Pers[] tabPers = { new Pers(){Nom = "Hugo", Prenom="Victor" , AN = 1802}, 

new Pers()(Nom = "Picasso", Prenom = "Pablo", AN = 1881), 
new PersOfNom = "Ravel", Prenom = "Maurice", AN = 1875}, 

}; 

En VB, la declaration de la classe est nettement plus verbeuse (ce l'etait presque tout 
autant en C# avant 1' introduction de la syntaxe tres raccourcie des proprietes) : 

Public Class Pers 

Private mNom As String 
Private mPrenom As String 
Private mAN As Integer 
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Property NomO As String 
Get 

Return mNom 
End Get 

Set(ByVal value As String) 

mNom = val ue 
End Set 
End Property 

Property PrenomO As String 
Get 

Return mPrenom 
End Get 

Set(ByVal value As String) 

mPrenom = value 
End Set 
End Property 

Property ANO As Integer 
Get 

Return mAN 
End Get 

Set(ByVal value As Integer) 

mAN = value 
End Set 
End Property 
End Class 

Tandis que 1' initialisation du tableau s'ecrit : 

Private tabPersO As Pers = _ 

{ _ 

New PersO {Nom="Hugo", Prenom="Victor" , AN=1802), _ 
New PersO {Nom="Picasso" , Prenom="Pabl o" , AN=1881}, 
New PersO {Nom="Ravel " , Prenom="Maurice" , AN=1875} 

} 

Nous allons afficher les noms dans la boite de liste 1 bNoms (figure 10-3). Pour cela, il faut 
indiquer a la boite de liste quel champ de Pers doit etre retenu pour l'affichage, ce qui est 
indique dans la propriete Di spl ayMemberPath de la boite de liste : 

1 bNoms. DisplayMemberPath = "Nom"; 

1 bNoms. ItemsSource = tabPers; 

Figure 10-3 

Hugo 

Picasso 

Ravel 
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Aucune barre de defilement n'est ici affichee a droite de la boite de liste car celle-ci ne 
contient pas suffisamment d' articles. 



L'attribut Di spl ayMemberPath est ici initialise dynamiquement (par programme done) mais 
aurait pu etre specifie dans le XAML, en attribut de la balise Li stBox. 

En l'absence de propriete Di spl ayMemberPath initialisee, on retrouve le nom de la classe 
dans tous les articles de la boite de liste. Ceci est tout a fait normal car, en l'absence de 
cette information, le run-time Silverlight applique la fonction ToString( ) a chaque article. 
Or, par defaut, la fonction ToString( ) d'une classe (que Ton finit par trouver loin dans la 
hierarchie, souvent au niveau object) renvoie le nom de la classe. II suffit done de rede- 
finir la fonction ToStringO dans la classe Pers pour modifier ce comportement (voir 
figure 10-4), ce qui s'ecrit en C# : 

public class Pers 



public override string ToStringO 
{ 

return Prenom + 

} 



+ Nom + " (" + AN + ")"; 



) 



Figure 10-4 



Victor Hugo (1802) 
Pablo Picasso (1881) 
Maurice Ravel (1 875) 



L'equivalent en VB de cette fonction ToString redefinie est : 

Public Overrides Function ToStringO As String 
Return Prenom & " " & Nom & " ( " & AN & " ) " 
End Function 



La personnalisation des boites de liste 

Avec les templates, il devient possible de modifier fondamentalement la presentation de 
la boite de liste (voir la section « Les templates » du chapitre 15). 

Dans la balise ListBox. ItemTempl ate, il convient d'indiquer comment chaque article doit 
etre affiche. Dans le code suivant, chaque article est constitue d'un StackPanel a orienta- 
tion horizontale et compose de trois compartiments (limites chacun a une chaine de 
caracteres, dont une d'un seul caractere) : 

<ListBox x:Name="lbNoms" > 

<Li stBox. ItemTempl ate> 
<DataTempl ate> 
<StackPanel Orientation="Horizontal" > 
<TextBlock Text="{Binding Prenom}" /> 
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<TextBlock Text=" " /> 
<TextBlock Text="{Binding Norn}" /> 
</StackPanel> 
</DataTemplate> 
</ListBox. ItemTempl ate> 
</ListBox> 

La liaison entre la boite de liste et le tableau de Pers est effectuee via la propriete I terns - 
Source. La boite de liste contient done autant d'articles que d'objets Pers dans le tableau. 

Nous allons maintenant ajouter une image. Pour cela, supposons que la classe Pays 
contienne deux champs, a savoir Image (nom de l'image du pays) et Nom (nom du pays) : 

public class Pays 
{ 

public string Image {get; set; } 
public string Nom {get; set;} 

} 



List<Pays> tabPays; 



tabPays = new List<Pays>(); 

tabPays .Add(new PaysO { Image = "France.jpg", Nom = "France" }); 



lbPays.ItemsSource = tabPays; 

Ce qui s'ecrit en VB : 

Public Class Pays 
Private mlmage As String 
Public Property ImageO As String 
Get 

Return mlmage 
End Get 

Set(ByVal value As String) 

mlmage = value 
End Set 
End Property 
Private mNom As String 
Public Property NomO As String 
Get 

Return mNom 
End Get 

Set(ByVal value As String) 

mNom = val ue 
End Set 
End Property 
End Class 



Private tabPays As ListtOf Pays) 



tabPays = New ListtOf PaysM) 
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tabPays.Add(New PaysO With {.Image = "France.jpg", .Nom = "France"}) 



1 bPays . ItemsSource = tabPays 

Passons maintenant au XAML qui permet de decrire la presentation des donnees. Pour 
chaque article, nous affichons l'image du pays et son nom (figure 10-5) : 

<ListBox x:Name="lbPays" > 

<Li stBox. ItemTempl ate> 
<DataTempl ate> 
<StackPanel Orientation="Horizontal " Margin="10" > 
<Image Source="{Binding Image}" /> 
<TextBlock Text="{Binding Nom}" 

Vertical Al ignment=" Center" Margin="10"/> 
</StackPanel> 
</DataTempl ate> 
</ListBox. ItemTempl ate> 
</ListBox> 



Figure 10-5 



Italie 



Giande-Bretagne 



France 



La grille de donnees 

Presentation generate 

La grille de donnees constitue l'un des composants les plus utiles et les plus prises. Les 
donnees sont presentees dans un tableau, a la maniere d'un tableur. Meme si la grille 
est prevue pour vous permettre de l'ameliorer et de 1' adapter a vos besoins, elle n'egale 
cependant pas un logiciel aussi abouti que Microsoft Excel. On regrettera notamment 
(par rapport a la grille d' ASP.NET) l'absence de pagination, ce qui permet de representer 
les donnees en pages plutot qu'en une longue (et parfois interminable) suite d'articles. 

Dans la mesure oil la grille de donnees (composant DataGrid) n'est pas un composant 
« leger » et que les programmes Silverlight n'en font pas tous l'usage, son code n'est 
inclus ni dans le run-time Silverlight ni dans la DLL de code automatiquement greffee au 
fichier XAP de l'application (cette derniere contenant le code compile de 1' application). 

Le code de la grille de donnees se trouve dans Sy s tern. Wi ndows. Cont rol s. Data, qu'il s'agit 
de charger separement dans le fichier XAP. Cette operation est heureusement effectuee 
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automatiquement des que Ton insere le composant DataGrid dans une page Silverlight. 
En effet, lorsque vous ajoutez un composant DataGrid par glisser-deposer a partir de la 
boite d'outils de Visual Studio (onglet Silverlight XAML Controls), le code suivant est 
automatiquement ajoute au fichier Page.xaml .cs : 

<UserControl 

xml ns :my="cl r-namespace : System. Wi ndows . Control s ; 

assembl y=System. Windows .Control s. Data" 

Cela qui signifie que : 

• le composant DataGrid injecte dans le projet devra etre prefixe (dans ses balises) de my 
(vous pouvez choisir un autre prefixe) ; 

• le code de la grille (dans la DLL System. Windows. Controls. Data) sera injecte dans le 
fichier XAP transmis au navigateur du client, ce qui accroit la taille de ce fichier d'une 
centaine de Ko. 

Commencons avec une grille dans sa forme la plus simple, avec generation automatique 
des colonnes en fonction de la source de donnees (a chaque propriete de la source de 
donnees correspond une colonne). L'attribut AutoGenerateCol umns valant true par defaut, 
nous pouvons l'omettre. 

L' association entre la source de donnees (ici, le tableau d'objets Pers de la section prece- 
dente « Cas des donnees provenant d'une liste d'objets » avec ses trois proprietes Nom, 
Prenom et AN, figure 10-6) et la grille est effectuee en cours d'execution, en initialisant la 
propriete ItemsSource, ce qui remplit la grille de donnees : 

<my:DataGrid x:Name="dg" /> 



dg. ItemsSource = tabPers; 







AN 




worn 


rrenom 




Hu B o 


Victor 


1802 






Picasso 


Pablo 


1881 




Rave. 


Maurice 


1875 






Cou-bet 


Gustave 


1819 






Zola 


Emile 


1840 




r~ i 


Monet 


Claude 


1 540 




Racine 


Jean 


1639 




L «i 


1 


► 





Au lieu d'initialiser dg . ItemsSource comme nous venons de le faire, nous aurions pu ecrire : 
<my:DataGrid ItemsSource="{Binding(" /> 



dg.DataContext = tabPers; 
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Une modification de la source de donnees (tabPers) n'a aucune influence sur la grille, 
pour cela, il faudrait que la classe Pers implemente l'interface INotifyPropertyChanged. 
Nous corrigerons cela bientot. 

Pour que le code ressemble davantage a celui de cas pratiques, avec acces a des donnees 
externes via des services Web, il faut ecrire une fonction Get Data qui renvoie une collection 
(ici, une fonction pour le moins triviale) : 

Pers[] GetDataO { return tabPers; } 

ou (on opere ainsi sur une liste plutot que sur un tableau de taille fixe) : 

List<Pers> GetDataO { return tabPers .ToList( ) ; } 

ou encore (ObservableCol lection etant une classe qui implemente l'interface INotifyProperty- 
Changed, ce qui presente l'avantage d' assurer le suivi de la liaison de donnees (voir la 
section precedente « Les liaisons de donnees avec TextBlock et TextBox ») : 

using System. Collections. ObjectModel ; 



ObservableCol lection<Pers> GetDataO 

f 

ObservableCollection<Pers> o = new Observabl eCol 1 ection<Pers>( ) ; 
foreach (Pers p in tabPers) o.Add(p); 
return o; 

} 

ce qui s'ecrit en VB : 

Imports System. Col 1 ect ions .ObjectModel 



Private Function GetDataO As ObservableCollection(Of Pers) 

Dim o As ObservableCollection(Of Pers) = New ObservableCollectiontOf Pers)() 

For Each p As Pers In tabPers 
o.Add(p) 

Next p 

Return o 
End Function 

L' assignation dans ItemsSource (ou dans le contexte de donnees) devient des lors : 

dg. ItemsSource = GetDataO; 

A ce stade, la grille est tout a fait standard, avec une rangee (en haut) des en-tetes (headers 
en anglais) de colonnes et une colonne (a gauche) qui sert a marquer la selection. Si l'utili- 
sateur clique sur un en-tete de colonne, la grille est alors triee selon le champ de cette 
colonne (tri alternativement croissant et decroissant). Meme si l'apparence de la grille est 
deja fort acceptable, nous allons en ameliorer progressivement la presentation ainsi que 
les fonctionnalites. 
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Modifications simpies de presentation de ia grille 

Pour commencer, nous allons nous interesser a des modifications simples, puis nous 
verrons comment modifier fondamentalement l'apparence des cellules avec la technique 
des templates. 

L' attribut HeadersVi si bi 1 i ty permet d' afhcher ou de supprimer des en-tetes, tant de colonnes 
que de rangees. Le tableau 10-2 presente les differentes valeurs de cet attribut. 



Tableau 10-2 - Les differents valeurs de I'attribut HeadersVisibility 



Nom de la valeur 


Description 


All 


Les deux en-tetes sont affiches : en-tete de colonnes (rangee superieure, avec les libelles de 
colonnes) et en-tete de rangees (colonne de gauche, avec marque de selection). 


Col umn 


Seuls les en-tetes de colonnes (avec les libelles de colonnes) sont affiches. 


None 


Aucun en-tete de colonnes ou de rangees n'est affiche. 


Row 


Seuls les en-tetes de rangees sont affiches (dans la colonne de gauche). 



II est possible de ne pas afhcher les lignes de separation entre les rangees et les colonnes 
en initialisant a f al se I'attribut Gri dl i nesVi si bi 1 i ty dont les differentes valeurs possibles 
sont : None (aucune ligne de separation), All (lignes de separation tant horizontales que 
verticales), Horizontal (seules les lignes de separation entre les rangees sont afhchees) et 
Vertical (seules les lignes de separation entre les colonnes sont afhchees). 

Le tableau 10-3 presente les differents attributs « simples » de presentation de grille. 



Tableau 10-3 - Les differents attributs « simples » de presentation de grille 



Nom de I'attribut 


Description 


Al ternatingRowBackground 
RowBackground 


Couleur (et plus precisement, pinceau) de coloriage du fond des rangees paires et 
impaires. Par defaut, les lignes paires et impaires ont deja des couleurs de fond 
differentes, en vue d'assurer une meilleure lisibilite. Ces deux proprietes permet- 
tent d'imposer une autre couleur de fond. RowBackground s'applique aux rangees 
impaires et Al ternatingRowBackground aux rangees paires. 


CanUserResizeCol umns 


Indique (true ou false) si I'utilisateur peut redimensionner les colonnes. Par 
defaut, la valeur vaut true. 


Col umnHeadersHeight 


Hauteur de la rangee des en-tetes de colonnes (celles avec les libelles de colonnes). 


Col umnWidth 


Largeur par defaut de toutes les colonnes. 


SelectionMode 


Indique si I'utilisateur peut selectionner une seule rangee (valeur Si ngl eFul 1 Row) 
ou plusieurs (valeur ExtendedFul 1 Row, avec selection multiple a I'aide des tou- 
ches Maj et Ctrl), ce qui est le cas par defaut. 



Les styles, qui rappellent les CSS (Cascading Style Sheets), seront etudies au chapitre 15. 
Disons pour le moment qu'il est possible de specifier un nom de style dans les attributs 
Style (style general de la grille), RowStyle (style general des rangees) ainsi que RowHeader- 
Style et Col umnHeaderStyl e (style des en-tetes). 
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Par defaut, les donnees sont rendues dans la grille comme des chaines de caracteres, sauf les 
proprietes de type booleen dans la source de donnees qui sont rendues par des cases a cocher. 

Assurer le suivi des donnees entre la source et la grille 

Comme nous l'avons vu precedemment, il faut implementer l'interface INotifyProperty- 
Changed dans la classe des objets de la source (ici, Pers) pour assurer le suivi des donnees 
entre la source et la cible (autrement dit, faire en sorte qu'une modification dans la source 
soit automatiquement repercutee dans la cible). Ceci n'est valable que si la source de 
donnees est de type Observabl eCol 1 ecti on (voir la section precedente « Presentation gene- 
rale » plus haut). Si ce n'est pas le cas, il faut modifier la classe comme indique a la fin de 
la section precedente « Les liaisons de donnees avec TextBlock et TextBox ». 

Desormais, si Ton execute le code suivant : 

tabPers[0].Nom = "Jules"; 

Cela a un effet immediat sur la grille : la cellule dans la colonne Norn de la premiere rangee 
est modifiee. 

Delink ses propres colonnes 

Dans les exemples precedents, les colonnes etaient construites automatiquement, en 
fonction des proprietes declarees dans la source de donnees. Cependant, il est possible de 
definir ses propres colonnes et de les associer (eventuellement) a des proprietes dans la 
source de donnees. Dans le code suivant, deux colonnes ont ete definies (le champ AN ne 
sera done pas repris dans la grille, l'attribut AutoGenerateCol umns passant a f al se). 

<my:DataGrid AutoGenerateColumns="False" > 

<my :DataGrid.Columns> 
<my:DataGridTextColumn Header="NOM" DisplayMemberBinding="{Binding Norn}" /> 
<my : DataGri dTextCol umn Header="PRENOM" 

DisplayMemberBinding="{Binding Prenom}" /> 

</my : DataGri d. Col umns> 
</my :DataGrid> 

Pour une colonne, il est possible de specifier un style pour l'en-tete (attribut HeaderStyl e, voir 
la section « Les styles » du chapitre 15) ou un style pour les cellules (attribut Cel 1 Styl e). 

Lattribut D1 spl ayMemberBi ndi ng permet d'associer une propriete de la source de donnees a 
une colonne. 

II est possible de definir deux types de colonne : DataGri dTextCol umn (pour un rendu sous 
forme de libelle) et DataGri dCheckBoxCol umn (pour un rendu sous forme de cases a cocher 
pour les booleens). 

Si l'attribut IsReadOnly d'une colonne vaut true, l'utilisateur ne peut pas modifier les 
cellules de cette colonne, meme si cette fonctionnalite est implemented (ce que nous 
expliquerons bientot). D'autres attributs de controle sont CanUserReorder (avec False, 
l'utilisateur ne peut pas deplacer cette colonne) et CanUser Resize (avec False, l'utilisateur 
ne peut pas redimensionner cette colonne). La valeur par defaut de ces attributs est True. 
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Les templates de colonnes 

Passons maintenant a la vitesse superieure et voyons comment personnaliser une colonne 
(plus precisement, la representation des cellules d'une colonne), ce qui est possible grace 
a la balise DataGridTemplateColumn. Dans l'exemple qui suit, une cellule est representee 
par une grille avec deux cellules en premiere rangee (pour Prenom et Nom) et une seule en 
seconde rangee (pour AN) : 

<my :DataGrid x:Name="dg" ItemsSource="{Binding}" RowHeight="50" 

AutoGenerateColumns="False" > 
<my:DataGrid.Col umns> 
<my :DataGridTempl ateCol umn Header="Nos celebrites" > 
<DataGridTemplateCol umn. Cel 1 Tempi ate> 
<DataTempl ate> 
<Grid> 
<Gri d . RowDef i ni ti ons> 
<RowDefinition /XRowDefinition /> 
</Gr id. RowDef initions> 
<Grid.ColumnDefinitions> 
<Col umnDefinition /XCol umnDef inition /> 
</Grid.ColumnDefinitions> 
<TextBlock Text="( Binding Prenom}" 

Grid.Row="0" Grid. Col umn="0" Margin="5, 0" /> 
<TextBlock Text="{Binding Nom}" Foreground="Red" 

Grid.Row="0" Grid. Col umn="l" /> 
<TextBlock Text="{Binding AN}" Grid.ColumnSpan="2" TextAlignment="Center" 
Grid.Row="l" Grid. Col umn="0" /> 

</Grid> 
</DataTempl ate> 
</DataGridTempl ateCol umn .Cel 1 Tempi ate> 
</my : DataGridTempl ateCol umn> 
</my:DataGrid.Col umns> 

</my :DataGrid> 

La figure 10-7 presente le resultat obtenu. La grille presente autant de colonnes que de 
balises my:DataGridTextColumn, my:DataGridCheckBoxColumn et my: DataGridTempl ateCol umn 
(encore faut-il que AutoGenerateCol umns ait pour valeur Fal se). 

Figure 10-7 ,^^^^^^ = ^^^^^^ = , 









Nos celebrites 




Victor Hugo - 
1802 


L 


Pablo Picasso : 

1881 I 




Maurice Ravel 
1875 




Cu stave Courbet 
1819 







Les liaisons de donnees 




Chapitre 10 



Editer le contenu d'une colonne 

II est possible de specifier la representation d'une cellule lorsque celle-ci entre en mode 
« edition ». Pour cela, il suffit d'ajouter dans la balise my:DataGridTemplateColumn de la 
colonne de cette cellule : 

<my : DataGridTempl ateCol umn.Cel 1 Edi tingTempl ate> 

<DataTempl ate> 
<TextBox Text="(Binding Nom, Mode=TwoWay} " /> 

</DataTempl ate> 
</my: Da taTempl a teCol umn.Cel 1 Edi tingTempl a te> 

Une zone d'edition s'affiche alors (et contient le nom pour cette rangee) suite a un clic 
sur une cellule. L'utilisateur peut annuler l'operation en appuyant sur la touche Echap 
(meme si le champ avait ete partiellement modifie) ou la confirmer au moyen de la 
touche Entree ou en cliquant sur une autre cellule. Nous verrons plus loin comment 
controler ces operations (et ne pas autoriser des modifications intempestives) en traitant 
l'evenement CommittingEdit. 

Determiner la ou les rangees selectionnees 

Pour detecter les rangees selectionnees, il suffit d' analyser dg. Selected I tern ou dg. Selected- 
Items (en fonction de la valeur de l'attribut SelectionMode, correspondant a une selection 
simple ou a une selection multiple). 

Dans le cas d'une selection multiple, dg.Selectedltems. Count contient le nombre d'articles 
selectionnes ainsi que les caracteristiques de chaque article : 



ce qui s'ecrit en VB : 

For Each p As Pers In dg.Selectedltems 

' nom dans p. Nom 

Next p 

L'evenement LoadingRow 

Cet evenement est signale a la grille au moment ou Silverlight prepare une rangee (travail 
en memoire, avant affichage). Cela nous donne 1' occasion de representer la rangee d'une 
maniere particuliere, en fonction de son contenu. 

Par exemple, pour afhcher sur fond rouge les rangees pour lesquelles l'annee de naissance 
est posterieure a 1850 : 



foreach (Pers p in dg.Selectedltems) 



// nom dans p. Nom 



<my : DataGrid LoadingRow="dg_LoadingRow' 



> 



void dg_LoadingRow(object sender, DataGridRowEventArgs e) 
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{ 

int N = e. Row.GetIndex( ) ; // numero de rangee en train d'etre preparee 

if (tabPers[N] .AN > 1850) e. Row. Background = new Sol idColorBrush(Colors . Red) ; 

} 

L'evenement Committing Edit 

La fonction suivante est executee quand la grille de donnees traite l'evenement Committing- 
Edit, c'est-a-dire quand l'utilisateur confirme une modification de cellule (en appuyant 
sur la touche Entree ou en cliquant sur une autre cellule) mais avant 1' introduction du 
contenu de la cellule modifiee (a ce moment, generalement, dans une zone d' edition) dans 
la source de donnees. Par programme, il est ainsi possible de refuser la prise en compte 
de la modification. 

private void dg_CommittingEdit(object sender, DataGridEndingEditEventArgs e) 

{ 



} 

Dans cette fonction, e.Row.GetIndex( ) et e. Column. Header font respectivement reference a 
la rangee (numero de rangee) et a la colonne concernees. e.EditingElement (de type 
FrameworkElement, done a convertir generalement en un TextBox) contient la nouvelle 
valeur (resultat de la modification effectuee par l'utilisateur). En faisant passer e. Cancel 
a true, on refuse que la modification soit repercutee dans la source de donnees : 

TextBox te = e.EditingElement as TextBox; 
if (te.Text == "???") e.Cancel=true; 

En VB, on ecrirait : 

Dim te As TextBox = TryCast(e.EditingElement, TextBox) 
If te.Text = "111" Then 

e.Cancel=True 
End If 
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Le stockage isole avec IsolatedStorage 

La zone de stockage isole 

Pour des raisons de securite, une application Silverlight n'a pas acces au systeme de 
fichiers de l'utilisateur. Neanmoins, elle peut acceder, sur la machine de l'utilisateur, a 
une zone du disque, dediee a chaque application Silverlight qui en fait la demande. Cet 
espace disque, appele stockage isole (isolated storage en anglais) est par defaut de 1 Mo 
par application Silverlight, mais il est possible d'augmenter cette taille si l'application en fait 
la demande. Cette extension d'espace disque n'est cependant accordee que si l'utilisateur 
l'autorise explicitement. 

A la maniere des cookies, bien connus des programmeurs Web, une zone de stockage 
isole est propre a une application Silverlight et persiste (sur le disque done) au-dela de la 
session de travail avec cette application. Elle permet de conserver des informations 
propres a l'utilisateur (par exemple, ses preferences) mais egalement d'autres donnees 
qui permettraient d'eviter les allers-retours au serveur (ce qui a un impact favorable sur 
les performances). Les acces a cet espace disque sont independants du navigateur, 
contrairement aux cookies. Malgre une analogie de depart, la technique Silverlight est 
incomparablement superieure aux cookies. 

Un programme Silverlight emanant du site http://www.aaa.com peut creer des repertoires, 
des fichiers, les supprimer ou encore ecrire et lire dans les fichiers localises de la zone de 
stockage isole qui lui a ete accordee. II ne peut acceder ni au systeme de fichiers de 
l'utilisateur ni aux zones de stockage isole allouees aux autres programmes Silverlight. 
Une application Silverlight ignore tout du chemin qui mene, sur le disque de l'utilisateur, 
a la zone de stockage isole. 
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Les classes relatives a cette memoire isolee font partie de l'espace de noms 
System. 10. Isol atedStorage, qu'il convient done de mentionner dans le programme C# 
(directive using) ou VB (directive Imports). 

Stocker simplement des informations elementaires 

La technique la plus simple pour stocker (de maniere permanente) puis retrouver (eventuel- 
lement longtemps apres) des informations propres a V application Silverlight et a Futilisateur 
(puisque Ton est sur sa machine) consiste a utiliser la classe Isol atedStorageSettings qui 
joue le role de dictionnaire. En C#, cela donne : 

using System. 10. 1 sol atedStorage; 



Isol atedStorageSettings appSettings 

= Isol atedStorageSettings . Appl icationSettings; 
appSettings["Agent"] = "Longtarin"; 

appSettings["ID"] = 15; // ou : appSettings. AddCID" , 15); 

appSettings .Save( ) ; 

En VB, les crochets doivent etre remplaces par des parentheses. 

Les objets du dictionnaire appSettings sont de type object (ce qui permet de stocker 
n'importe quoi) et la cle est de type string. Pour verifier si la cle Norn existe, il convient 
d'ecrire le code suivant : 

if (appSettings. ContainsC'Nom")) 

Et pour retrouver les valeurs associees a des cles : 

Isol atedStorageSettings appSettings 

= I sol atedStorageSettings. Appl icationSettings; 
string agent = appSettings["Agent"] .ToString( ) ; 
int id = (int)appSettings["ID"] ; 

En VB, cela donne : 

Imports System. 10. Isol atedStorage 



Dim appSettings As IsolatedStorageSettings _ 

= I sol atedStorageSettings. Appl icationSettings 
appSettingsCAgent") = "Longtarin" 
appSettings("ID") = 15 
appSettings. SaveO 



Dim n As Integer = appSettingsC'Annee") 

Le systeme de fichiers du stockage isole 

Une autre technique, plus elaboree, consiste a reclamer 1' acces a cette memoire disque isolee : 
Isol atedStorageFi 1 e isf = Isol atedStorageFile.GetUserStoreForAppl ication( ) ; 
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A partir de l'objet IsolatedStorageFi le, il est possible : 

• de determiner l'espace disponible (pour l'application Silverlight qui reclame cette 
information) ; 

• de creer et de supprimer des repertoires ; 

• de creer et de supprimer des fichiers ; 

• de verifier si un fichier ou un repertoire existe ; 

• d'obtenir les noms des repertoires et des fichiers deja presents ; 

• de tenter d'augmenter l'espace disque alloue a l'application. 

II est bien entendu egalement possible de lire et d'ecrire dans ces fichiers, comme on le 
ferait pour n'importe quel fichier en programmation Windows. 

Voyons comment effectuer ces operations par programme. 

Le tableau 11-1 presente les differentes proprietes et methodes de la classe IsolatedStorage- 
File. 



Tableau 11-1 - Les differentes proprietes et methodes 
de la classe IsolatedStorageFi le 



Norn de la propriete/methode 


Description 


Avai 1 abl eFreeSpace 


Propriete qui donne l'espace disque (en octets) encore disponible dans la zone 
de stockage isole allouee a l'application Silverlight (entier au format 1 ong). 


CreateDi rectory(di r) 


Cree un repertoire dont le nom est passe en argument. Si un repertoire porte 
deja ce nom, il n'est pas modifie. 


CreateFile(fich) 


Cree un fichier dont le nom est specifie en argument. Renvoie un objet Isol a- 
tedStorageFi 1 eStream qui donne acces au contenu de ce fichier. Loperation 
echoue si le fichier existe deja. 


Del eteDi rectory(di r) 


Supprime le repertoire dont le nom est passe en argument. 


DeleteFile(fich) 


Supprime le fichier dont le nom est passe en argument. 


Di rectoryExists(di r) 


Renvoie true si le repertoire existe. 


FileExists(fich) 


Renvoie true si le fichier existe. 


GetDi rectoryNamest ) 


Renvoie un tableau de chaines de caracteres contenant les noms des repertoi- 
res deja crees. 


GetDi rectoryName(pat) 


Meme chose mais avec une chaine de recherche, y compris les caracteres 
generiques * et ?. 


GetFileNamesO 


Renvoie un tableau contenant les noms des fichiers. 


GetFi 1 eNames (pat) 


Meme chose mais avec possibilite de specifier une chaine de recherche (par 
exemple, "F*.*" pour se limiter aux fichiers dont le nom commence par F, 

quelle que soit I'extension). 

1 
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Tableau 11-1 - Les differentes proprietes et methodes 
de la classe IsolatedStorageFile (suite) 



Nom de la propriete/methode Description 



OpenFile(fich, 

FileMode, 
FileAccess) 



IncreaseQuotatquota ) 



Ouvre le fichier dont le nom est specifie en premier argument et renvoie un objet 
Isol atedStorageFi 1 eStream donnant acces au contenu du fichier. Open- 
Fi 1 e renvoie nul 1 (Nothing en VB) en cas d'echec. 



Le deuxieme argument indique comment Silverlight doit reagir en cas de conflit 
de nom. Fi 1 eMode peut contenir I'une des valeurs suivantes de I'enumeration 
Fi 1 eMode (voir exemple plus loin) : 


CreateNew 


Un nouveau fichier doit etre cree mais si un fichier existant 
porte deja ce nom, une exception est generee. 


Create 


Si un fichier porte ce nom, il est ecrase. 


Open 


Un fichier existant doit etre ouvert, sinon une exception est 
generee. 


OpenOrCreate 


Le fichier, s'il existe, doit etre ouvert, sinon il faut en creer 
un nouveau. 


Truncate 


Un nouveau fichier doit etre cree mais si un fichier existe, 
il est d'abord vide de son contenu. 


Append 


Si le fichier existe, il doit y avoir positionnement a la fin du 
fichier de maniere a pouvoir y ajouter de nouvelles don- 
nees. 



Le troisieme argument est optionnel. Largument Fi 1 eAccess peut etre I'une des 
valeurs suivantes de I'enumeration Fi 1 eAccess : Read, Write ou ReadWrite. 

Effectue une tentative d'augmentation de la taille de I'espace disque suscepti- 
ble d'etre alloue a I'application Silverlight. Le quota reclame (exprime en octets) 
doit etre superieur a celui deja accorde (sinon, une exception est generee). Une 
boite de dialogue est affichee, qui demande a I'utilisateur s'il accepte cette aug- 
mentation de la taille de I'espace de stockage isole (figure 11-1). La fonction 
renvoie true si I'operation s'est averee possible. Un programme ne peut que 
reclamer une augmentation, il ne peut reduire la taille de la zone de stockage 
isole qui lui a ete devolue. 
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Pour connaitre les noms des fichiers deja presents dans l'espace de stockage isole alloue 
a 1' application Silverlight (et uniquement a cette application), il convient d' ecrire le code 
suivant : 

using System. 10. IsolatedStorage; 



Isol atedStorageFi 1 e isf = Isol atedStorageFile.GetUserStoreForAppl icationt ) ; 
string[] ts = isf .GetFi 1 eNames( ) ; 
foreach (string s in ts) 

Le nombre de fichiers presents est donne par ts. Length. Dans la boucle foreach, on 
retrouve chaque nom de fichier dans s. 

Pour lire ou ecrire dans le fichier, il faut utiliser les fonctions de la classe Isol atedStorage- 
Fi leStream, comme on le fait en programmation .NET pour n'importe quel fichier, a 
l'aide des classes derivees de Fi leStream. 

Le tableau 11-2 presente les differentes proprietes et methodes de la classe Isol atedStorage- 
Fi 1 eStream. 



Tableau 11-2 - Les differentes proprietes et methodes 
de la classe IsolatedStorageFileStream 



Nom de la propriete/methode 


Description 


Read(byte[] , from, n) 


Lit n octets a partir du deplacement from dans le flux (le deplacement etant 
exprime en nombre d'octets a partir du debut du fichier). La fonction Read ren- 
voie le nombre d'octets lus, ce qui permet de detecter la fin du fichier (quand 
cette valeur est inferieure a n). Les donnees ainsi lues sont stockees dans le 
tableau d'octets passe en premier argument. 


Write(byte[] , from, n) 


Ecrit n octets dans le fichier, a partir du deplacement from dans le fichier. Les 
donnees a ecrire proviennent du tableau d'octets passe en premier argument. 


Length 


Taille du fichier, en octets et sous forme d'un entier de type 1 ong. 


Position 


Position courante dans le fichier, par rapport au debut de celui-ci. 


Closet) 


Ferme le flux. 



Pour creer un fichier (en supposant qu'aucun fichier existant ne porte ce nom, ce dont le 
programme devrait s' assurer) et y ecrire une chaine de caracteres, il convient de saisir le 
code suivant : 

using System. Text // pour UTF8Encoding 



Isol atedStorageFi 1 e isf = Isol atedStorageFile.GetUserStoreForAppl ication( ) ; 
IsolatedStorageFileStream fs = isf.CreateFileCFich.dat"); 
string s = "Fichier cree le " + DateTime. Now.ToShortDateString( ) 

+ " a " + DateTime. Now. ToLongTimeStringO; 
// conversion de string en byte[] 
UTF8Encoding enc = new UTF8Encoding( ) ; 
fs.Writetenc.GetBytes(s) , 0, s. Length); 
fs. Closet); 
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La classe UTF8Encoding fait partie de l'espace de noms System. Text, qu'il faut done ajouter 
en tete du fichier C# ou VB (directive using ou Imports selon le langage). 

Voici le code a ecrire en C# pour lire le contenu du fichier : 

Isol atedStorageFi 1 e isf = Isol atedStorageFi 1 e.GetliserStoreForAppl ication( ) ; 

Isol atedStorageFi 1 eStream fs = isf.OpenFileCFich.dat", System. 10. Fi 1 eMode. Open) ; 

int N = (int)fs. Length; // taille du fichier 

byte[] tb = new byte[N]; // tableau de reception 

fs.ReadUb, 0, N); 

// converti r tb en une chaine de caracteres 
UTF8Encoding enc = new UTF8Encoding( ) ; 
string s = enc.GetStringttb, 0, tb. Length); 

Ce qui donne en VB : 

Private Sub bEcri re_Cl ickCByVal sender As System. Object, _ 

ByVal e As System. Windows. RoutedEventArgs) 
Dim isf As Isol atedStorageFi 1 e =_ 

Isol atedStorageFi 1 e.GetUserStoreForAppl icationt ) 
Dim fs As Isol atedStorageFi 1 eStream = isf.CreateFileCFichvb.dat") 
Dim s As String = "Fichier cree le " & DateTime.Now.ToShortDateStringO 

& " a " _& DateTime.Now.ToLongTimeStringt ) 
Dim enc As New UTF8Encoding 
fs.Write(enc.GetBytes(s), 0, s. Length) 
fs. Closet ) 
End Sub 

Private Sub bLire_Click(ByVal sender As System. Object, _ 

ByVal e As System. Windows. RoutedEventArgs) 
Dim isf As Isol atedStorageFi 1 e 

= Isol atedStorageFi 1 e.GetUserStoreForAppl i cation ( ) 
Dim fs As Isol atedStorageFi 1 eStream = isf .OpenFile("Fichvb.dat",_ 

System. I0.FileMode.0pen) 
Dim N As Integer = CInt(Fix(fs. Length)) ' taille du fichier 
Dim tb(N - 1) As Byte ' tableau de reception 
fs.Read(tb, 0, N) 

' converti r tb en une chaine de caracteres 
Dim enc As New UTF8Encoding( ) 
Dim s As String = enc.GetStringttb, 0, tb. Length) 
End Sub 

Dans les extraits de code suivants, des lignes de texte vont etre ecrites puis lues dans un 
fichier situe dans l'espace de stockage isole : 

using System. 10. IsolatedStorage; 
using System. 10; 

Pour ecrire deux lignes de texte dans le fichier App.dat : 

Isol atedStorageFi 1 e isf = IsolatedStorageFile.GetUserStoreForApplicationO; 
Isol atedStorageFi 1 eStream isfs 

= new IsolatedStorageFileStreamCApp.dat", FileMode. Create, isf); 
StreamWriter sw = new StreamWriter(isfs); 

sw.WriteLineC'Premiere ligne"); sw.WriteLineC'Deuxieme ligne"); 
sw.CloseO; isfs. Closet ) ; 
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Et pour lire ulterieurement ces deux lignes : 

Isol atedStorageFi 1 e isf = Isol atedStorageFile.GetllserStoreForAppl ication( ) ; 
Isol atedStorageFi 1 eStream isfs = isf.OpenFileCApp.dat", FileMode.Open) ; 
StreamReader sr = new StreamReader(isfs) ; 
string si = sr.ReadLineO; 
string s2 = sr.ReadLineO; 
sr.CloseO: isfs.CloseO; 

oil si contient Premiere ligneets2, Deuxieme ligne. sr.ReadLineO renvoie null quandplus 
aucune ligne n'est presente dans le fichier. 



Localisation de ia zone de stockage isole 

Pour windows, la zone de stockage isole se trouve sur le disque (1' application Silverlight 
n'a aucun moyen de le savoir ni de tirer parti de cette information) : 

• pour XP, dans le repertoire C:\Documents and Settings\ut 7 7 7'sdteur\Local SettingsX 
Appl ication\Data\Microsoft\Si 1 verl ight\i s ; 

• pour Vista, dans le repertoire ut7'7 7'sateur\AppData\LocalLow\Microsoft\Silverlight\is 
(figure 11-2). 

Fi9Ure11 - 2 <| gerard 

All Users 
' AppData 
o |l. Local 
' LocalLow 

Apple Computer 
' Microsoft 

CryptnetUrlCache 
i MF 
" Silverlight 

' k is 
* \ lzr5pwtp.yge 
* ) ywlOonyg.Hf 

- Is 

, ajhnwyv0qfdh0wzecwz0siwhoi2rei5x 
kr40uns0d03ytmxqnfncovyabqoswlzc 

| mwmdyvdguldzqai23mmqhydqiif5sbmf 
nduaqvsdvjx0u5eghbjwnslctulhvxv4 

| qlwfghq0f3yqqvlln3qci3avp3wbz2df 

| Wbgnc4cgp44rlkslxfg5uw0poolhgefj 

- Its 

> 1 2gh31m3acczompxgvc43clhftfhmzwsb 
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3zqvb3qsgwviexz033yydluuzxfulbxe 

> J hnxnq3iutvy0qmeay3uyxcuqchv2xbay 
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Le repertoire mentionne ci-dessus (et qui depend du systeme d' exploitation) contient 
deux sous-repertoires aux noms en apparence cryptes, qui contiennent a leur tour un 
repertoire nomme g ainsi qu'un repertoire s. Le repertoire g contient des sous-repertoires 
aux noms cryptes (sur une trentaine de caracteres) qui dependent du site d'origine de 
l'application Silverlight (autant de repertoires que de sites d'origine). Par ailleurs, chacun de 
ces repertoires contient quatre fichiers, notamment le fichier id.dat dans lequel figure, en 
clair, le nom du site d'origine. Le repertoire s, quant a lui, contient egalement des sous- 
repertoires aux noms cryptes (un par application Silverlight) qui incluent : 

• un fichier Group.dat renfermant le nom du repertoire (sous g) propre a l'application 
Silverlight ; 

• les donnees en clair (repertoires et fichiers) de l'application Silverlight. 

Au moment de la sortie de Silverlight 2 beta 2, seul l'outil storeAdm (introduit avec la 
version 2 du framework .NET en 2005) permet, en mode console, d'administrer la zone 
de stockage isole. 

Lire des fichiers distants 

Une application Silverlight peut ouvrir et lire un fichier se trouvant sur le serveur grace 
au composant WebCl i ent (voir chapitre 13), capable d'effectuer une lecture asynchrone du 
fichier (autrement dit, sans bloquer l'application Silverlight durant la lecture). Si le 
fichier Fich.txt se trouve dans le repertoire du fichier XAP de l'application Silverlight 
(sous-repertoire ClientBin), il convient d'ecrire le code suivant (voir les explications au 
chapitre 15) : 

using System. Net; 
using System. 10; 



WebClient client = new WebClientO; 
cl ient.OpenReadCompleted 

+= new OpenReadCompl etedEventHandl er(cl ient_OpenReadCompl eted) ; 
cl i ent .Open ReadAsynct new Uri ( "Fich.txt" , Uri Kind. Rel ati ve) ) ; 



void client_OpenReadCompleted(object sender, OpenReadCompl etedEventArgs e) 

{ 

StreamReader sr = new StreamReader(e. Result); 
string s = sr . ReadLine( ) ; 
while (s != null ) 
{ 

// contenu de la ligne dans s 

s = sr . Readl_ine( ) ; 

} 

} 

Dans cet extrait de code, nous avons neglige de tester le bon achevement de l'operation 
afin de n'introduire qu'un seul nouveau concept a la fois. En cas d'erreur (par exemple, 
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1' absence du fichier sur le serveur), une exception est generee dans la fonction de traitement 
de l'evenement OpenReadCompleted. 

II faudrait done ecrire : 

void cl ient_OpenReadCompleted(object sender, OpenReadCompl etedEventArgs e) 

{ 

try 

// Ok, tout s'est bien passe 

catch (Exception exc) 
// traiter l'erreur (message d'erreur dans exc. Message) 

( 

Si le fichier contient des lettres accentuees, veillez a le sauvegarder au format UTF-8. 

Lire des fichiers locaux 

Comme nous l'avons vu pour les images (voir la section « Lire une image a partir du 
systeme de fichiers local » du chapitre 7), une application Silverlight peut acceder a des 
fichiers locaux a condition que l'utilisateur mene explicitement (via une boite de dialogue) a 
ce fichier : 

using System. 10; 
using System. Text; 



OpenFi 1 eDi al og ofd = new OpenFi 1 eDialog( ) ; 
ofd. Filter = "Fichiers de texte|*.txt"; 
if (ofd.ShowDialogO == DialogResult.OK) 

{ 

Stream str = ofd.SelectedFile.OpenReadt ) ; 

int N = (int)str. Length; // taille du fichier de texte 

byte[] tb = new byte[N]; 

str.Read(tb, 0, N); // lire tout le contenu du fichier 

// amener le contenu du fichier local dans une variable de type string 
s = UTF8Encoding.UTF8.GetString(tb, 0, N); 
str .Cl ose( ) ; 

} 

ou, plus simplement dans le cas de fichiers de texte (ReadLine etant applicable a sr) : 

StreamReader sr = ofd.SelectedFile.OpenTextt ) ; 
s = sr. ReadToEndt ) ; 
sr.Cl ose( ) ; 



Ici aussi, 1' application Silverlight ignore tout du chemin qui mene au fichier de texte 
selectionne par l'utilisateur. 
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Les fichiers en ressources 

Comme nous l'avons vu pour les images (voir la section « Les images en ressources » du 
chapitre 7), un fichier (ici, un fichier de texte) peut etre incorpore en ressource. Pour cela, 
selectionnez le menu Ajouter>Element existant. . . dans la fenetre du projet, partie Silver- 
light et localisez le fichier souhaite. Specifiez ensuite les proprietes de ce nouvel element 
dans le projet et forcez la valeur Resource dans le champ Action de generation. Le fichier 
est ainsi incorpore en ressource et sera greffe au fichier XAP apres compilation (plus 
precisement a la DLL contenant le code de 1' application, cette DLL etant elle-meme 
greffee au fichier XAP). 

Pour lire le contenu du fichier en cours d'execution de programme (ici, le fichier de texte 
SLRes.txt compose de deux lignes et inclus en ressource de l'application SLProg), il 
convient d'ecrire le code suivant : 

usi ng System. Wi ndows . Resources ; 
using System. 10; 



StreamResourcelnfo sri = Appl ication.GetResourceStream( 

new Uri ( "SLProg;component/SLRes . txt" , UriKind. Relative)) ; 
StreamReader sr = new StreamReader(sri .Stream) ; 
string si = sr.ReadLineO; 
string s2 = sr.ReadLineO; 
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Les fichiers XML sont des fichiers de texte jouant un role considerable en informatique. 
lis constituent en effet un moyen privilegie pour passer des informations d'un pro- 
gramme a un autre ou d'une machine a une autre, quelle que soit la plate -forme sur 
laquelle s'executent ces programmes. Ainsi, pour les services Web (qui consistent a faire 
executer des operations sur une autre machine, voir chapitre 13), la communication se 
fait communement par de longues chaines de caracteres au format XML echangees entre 
programmes serveurs et programmes clients. 

Pour expliquer de quelle maniere est lu et decortique un fichier XML (ou une chaine de 
caracteres au format XML) dans un programme Silverlight, partons de l'exemple suivant 
(le fichier Pers.xml) : 

<?xml version="1.0" encoding="iitf-8" ?> 
<Personnages> 
<Personnage> 

<Nom>Talon</Nom> 

<Prenom>Achi 1 1 e</Prenom> 

<Pere VN="Michel Regnier" DN="1931">Greg</Pere> 

<Creation>1963</Creation> 
</Personnage> 
<Personnage> 

<Nom>Petitpas</Nom> 

<Prenom>Prudence</Prenom> 

<Pere DN="1922">Maurice Marechal</Pere> 

<Creation>1957</Creation> 
</Personnage> 
<Personnage> 

<Nom>Titeuf</Nom> 

<Pere VN="Phi 1 i ppe Chappuis" DN="1967">Zep</Pere> 
<Creation>1992</Creation> 
</Personnage> 
</Personnages> 
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Ce fichier XML est certes limite a trois personnages (ce qui est suffisant pour cet expose, 
davantage de donnees n'apporteraient rien) mais, surtout, on constate que des balises et 
des attributs ne sont pas presents de maniere uniforme, ce qui correspond a un cas pratique 
trop souvent passe sous silence. 

Pour decortiquer ce XML, nous utiliserons la nouvelle technologie introduite par Micro- 
soft, a savoir Linq (Language Integrated Query), ici appliquee au XML, autrement dit 
Linq to XML. 

Linq est un langage integre a C# et VB qui permet de retrouver (mais aussi de mettre a 
jour) des informations en provenance de sources de donnees aussi disparates que des 
tables en memoire, des bases de donnees ou des fichiers XML. II est base sur la 
syntaxe SQL, bien connue des programmeurs. Avant Linq, il fallait preparer des chaines 
de caracteres contenant des commandes SQL, executer ces commandes et amener les 
resultats dans des variables en memoire. Tout cela se faisait sans que le compilateur 
puisse effectuer des verifications et des conversions automatiques pourtant bien necessaires. 
Pour le XML, les choses etaient encore fort differentes. Linq integre tout cela dans C# et 
VB et nous fait beneficier de l'aide contextuelle, si pratique. 

Pour pouvoir utiliser Linq to XML dans un programme Silverlight, il faut reclamer 
l'inclusion de librairies propres a cette technologie (il est en effet inutile de charger les 
programmes qui n'en feraient pas usage). Pour cela, effectuez un clic droit sur la partie 
Silverlight du projet dans l'Explorateur de solutions, selectionnez Ajouter une refe- 
rence.. .>onglet .NET et ajoutez System. Xml . Li nq (par double-clic ou selection suivie d'un 
clic sur le bouton OK). 

La librairie System. Xml . Linq.dll sera ainsi incluse dans le fichier d'extension .xap trans- 
mis au navigateur, ce qui accroit la taille de ce fichier d'une cinquantaine de Ko. 

Passons maintenant a l'ecriture du programme Silverlight qui decortiquera ce fichier XML. 

Entetedu fichier nomme pardefaut Page.xaml .cs ou Page.xaml .vb selon le langage choisi, 
il faut ensuite ajouter : 

] using System. Xml . Linq; // en C# 

Imports System. Xml .Linq ' en VB 

Nous allons d'abord envisager le cas d'un fichier XML inclus dans le projet. Dans 
l'Explorateur de solutions (partie Silverlight du projet), selectionnez Ajouter>Element 
existant... et localisez le fichier Pers.xml sur votre ordinateur. Celui-ci sera alors copie 
dans le repertoire du projet et, apres compilation de 1' application, il sera inclus dans le 
fichier .xap transmis au navigateur. 

Nous expliquerons a la section « Application a la lecture d'un fichier XML » du chapi- 
tre 13 comment lire des fichiers XML non inclus en ressources et se trouvant sur le 
serveur. 
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Chargement du fichier XML 

Pour charger un fichier XML et commencer a le decortiquer, nous avons deux possibilites : 

• soit creer une variable de type XDocument et charger le fichier ; 

• soit creer une variable de type XE1 ement et charger le fichier. 

Analysons ces deux possibilites en mettant en evidence ce qui les distingue (tableau 12-1). 



Tableau 12-1 - Les deux possibilites de chargement 
d'un fichier XML 



Premiere possibility (C#) 


Seconde possibility (C#) 


XDocument xml ; 


XEl ement xml ; 


xml = XDocument . Load( "Pers .xml ") ; 


xml = XEl ement . Loadt "Pers .xml ") ; 


Premiere possibility (VB) 


Seconde possibility (VB) 


Dim xml as XDocument 


Dim xml as XEl ement 


xml = XDocument . Load( "Pers .xml " ) 


xml = XEl ement . Loadt "Pers .xml " ) 



La difference se situe ici : 

• avec la variable de type XDocument, il faut d'abord passer par la balise exterieure qu'est 
Personnages ; 

• avec la variable de type XEl ement, on accede directement aux balises Personnage, en 
court-circuitant la balise Personnages. 

Les balises XML peuvent se trouver dans une chaine de caracteres, ce qui est le cas lors- 
que les donnees proviennent d'un service Web. Si le XML est construit en memoire, 
remplacez les apostrophes doubles (") du XML par des apostrophes simples (')• Si le XML 
provient d'un service Web, prenez soin de remplacer &1 1 ; par le caractere < et &gt ; par le 
caractere > (voir l'exemple de la section « Application a la lecture d'un fichier XML » du 
chapitre 13). II faut alors executer la fonction Parse de la classe XDocument ou de la classe 
XEl ement (remplacez paries balises Personnage) : 

s = "<?xml version='1.0' encoding='utf-8' ?><Personnages> </Personnages>" ; 

xml = XElement.Parse(s) ; 

L' exception Xml Exception est generee en cas d'erreur de balise XML dans s. Cette erreur 
peut etre intercepted dans untry / catch. 

Quelle que soit la technique utilisee, la fonction El ements donne acces a une collection de 
balises (de noeuds ou d'elements, si vous preferez). Le tableau 12-2 presente les codes C# 
et VB a ecrire pour connaitre le nombre de balises Personnage (ici, trois), sachant que la 
fonction Count renvoie le nombre d'elements dans une collection. 
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Tableau 12-2 - Calcul du nombre de balises Personnage 

c# 



Premiere possibility 



XDocument xml ; 




xml = XDocument . Loadt "Pers .xml ") ; 

n = xml . El ements( "Personnages" ) . El ementst "Personnage" ) . Count () ; 
Seconde possibility 

XEl ement xml ; 



xml = XEl ement . Load( "Pers .xml ") ; 

n = xml . El ementst "Personnage" ) .Countt ) ; 



VB 



Premiere possibility 



Dim xml as XDocument 



xml = XDocument . Loadt "Pers .xml " ) 

n = xml . El ementst "Personnages" ) . El ementst "Personnage" ) .Countt ) 
Seconde possibility 

Dim xml as XEl ement 

xml = XEl ement . Loadt "Pers .xml " ) 

n = xml . El ementst "Personnages" ) . El ementst "Personnage" ) .Countt ) 



Les espaces de noms 

II arrive souvent que la balise externe (ici, Personnages) fasse mention d'un espace de 
noms. Par exemple : 

<?xml version="1.0" encoding="utf-8" ?> 
<Personnages xmlns="http://www.moi .fr" > 



Dans ce cas, les arguments des fonctions faisant reference a des noms de balises doivent 
etre ecrits differemment : 

XNamespace ns = "http://www.moi.fr"; 

int n = xml .Elements(ns+"Personnage").Count(); 



Cas pratiques 

Pour partir a la decouverte de Linq, envisageons des cas pratiques de recherche dans le 
fichier XML. Pour ne pas alourdir inutilement l'expose, nous partirons toujours d'une 
variable de type XEl ement. Les exemples pratiques suivants utilisent le langage Linq. 
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Retrouver les noms des personnages 

Pour cela, il convient de creer et d'initialiser la variable xml de type XE1 ement. A noter que 
le nom de cette variable, donnant acces directement a la collection de balises Personnage, 
est bien entendu sans importance. Linq va ensuite nous permettre de construire la liste 
des personnes (s est ici de type « chaine de caracteres » qui finalement contiendra les 
noms des personnages, separes par un tiret) : 

var listePers = from p in xml .ElementsC'Personnage") select p; 
foreach (var el in listePers) s += el .ElementC'Nom"). Value + " - "; 

Analysons d'abord la premiere ligne de cet extrait de code (la syntaxe VB sera presentee 
par la suite) : 

• xml , qui est de type XE1 ement, donne directement acces aux balises situees sous la balise 
la plus exterieure ; 

• xml .ElementsC'Personnage") donne acces a la collection de balises Personnage ; 

• cette collection est balayee avec from p in xml .ElementsC'Personnage"). II s'agit la 
d'une syntaxe Linq, integree au C#, que nous retrouverons telle quelle en VB. Chaque 
element de cette collection s'appelle p et est retenu (avec sel ect p) pour figurer dans la 
liste. 

Nous avons ainsi transforme une collection de balises en une collection d'objets, plus 
facilement manipulables par programme. 

Cette premiere ligne en C# merite de plus amples commentaires. Tout d'abord, quel est 
le veritable type de 1 1 stePers ? Avec var, nous laissons au compilateur le soin de deter- 
miner Tinformation. var n'a rien a voir avec les antiques (et dangereux a l'usage) variants 
du Basic (type indetermine, sujet a tout moment a n'importe quel changement). Ici, 
1 i stePers designe une variable d'un type bien determine et ne pourra jamais, apres initia- 
lisation, contenir une valeur d'un autre type. listePers est ici de type « enumeration 
generique de Xel ement » (il suffit de laisser un instant le curseur sur var pour s'en rendre 
compte). 

Utiliser var plutot qu'un type assez complique a formuler est d'une remarquable facilite 
pour le programmeur et n'a aucune consequence sur la rigueur et la qualite du code 
genere (le compilateur effectue le travail a notre place et c'est d'ailleurs pour cela que var 
est utilisee). 1 i stePers. Count ( ) donnerait le nombre d' elements dans la liste (ici, 3). 

Analysons maintenant la deuxieme ligne de code (une boucle foreach, ce qui n'a rien de 
nouveau) : 

• el correspond a un personnage (ensemble des balises Nom, Prenom, etc., relatives a un 
personnage) mais, ici aussi, on laisse au compilateur le soin de determiner le type exact 
(qui est en fait System. Xml . Linq.XElement) ; 

• el . El ement( "Nom" ) contient, pour le premier personnage, <Nom>Tal on</Nom> ; 

• el .ElementC'Nom"). Value contient Talon. 
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A la suite des trois passages dans la boucle foreach, el . El ementC'Nom"). Value est passe 
successivement par les valeurs Talon, Petitpas et Titeuf. 

Notez la difference entre : 

• Elements, qui donne acces a une collection de balises (les balises Personnage, par 
exemple) ; 

• El ement, qui donne acces a une balise particuliere (la balise Nom d'un personnage parti- 
culier, par exemple). 

La syntaxe VB est en tout point semblable : 

Dim listePers = From p In xml .Elements("Personnage") Select p 
For Each el In listePers 
s += el . El ementt "Nom" ) .ToString( ) & " - " 
Next 

Ici, les balises <Nom> et </Nom> sont reprises dans s ; elles ne le seraient pas avec 
el . El ementC'Nom" ) .Value. 



Retrouver les prenoms des personnages 

Certains personnages n'ont pas de balise Prenom. Pour tester si une telle balise existe, il 
convient d'ecrire le code suivant dans la boucle foreach : 

var o = el . El ement( "Prenom" ) ; 

if (o == null) la balise n'existe pas .. 

el se 1 a bal i se existe . . 

Quand la balise Prenom existe (o est alors different de null ou Nothing en VB), on peut 
utiliser o . Val ue pour retrouver le prenom. 



Detecter si une balise contient une ou plusieurs balises 

Pour detecter si une balise (celle qui est en train d'etre examinee dans le foreach) contient 
une ou plusieurs balises (par exemple, si une balise Pere dans une balise Personnage parti- 
culiere contient elle-meme une balise), il convient d'ecrire le code suivant : 

var o = el . El ement( "Pere" ) ; 

if (o.HasElements) une ou plusieurs balises enfants .. 

else pas de balise enfant pour cet element .. 

On retrouve les noms des balises enfants de la balise courante en ecrivant (on passe en 
revue toutes les balises enfants s'il y en a) : 

if (o.HasElements) 
foreach (var x in o.ElementsO) 

nom de la balise dans x.Name .. 



Acces XML avec Linq M 

Retrouver les attributs d'une balise 

Pour tester si une balise (la balise Pere en train d'etre examinee dans la boucle des person- 
nages, par exemple) contient un ou plusieurs attributs, il convient d'ecrire le code suivant : 

if (el .Element("Pere").HasAttributes) 

Et pour retrouver un attribut (VN pour « veritable nom », par exemple), il faut ecrire le code 
suivant (sans oublier de tester si cet attribut existe bien dans la balise Pere particuliere) : 

var attVN = el . Element( "Pere" ) . Attribute ( "VN" ) ; 

if (attVN != null) l'attribut existe bien .. 

Comme on peut s'y attendre, on retrouve alors la valeur de 1' attribut dans attVN . Val ue. 

Et maintenant la meme chose en VB, mais sans creer de variable intermediaire (on retient 
dans s le nom de l'auteur s'il s'agit du veritable nom et le pseudonyme suivi, entre paren- 
theses, du veritable nom s'il s'agit d'un nom d'auteur) : 

Dim listePers = From p In xml .ElementsC'Personnage") Select p 
For Each el In listePers 
If el .Element("Pere").Attribute("VN") Is Nothing Then 
s += el .ElementC'Pere"). Value & " - " 
Else : s += el .El ement( "Pere"). Value & " (" 

& el .ElementC'Pere"). Attributet "VN" ) . Value & ")" & " - " 

End If 
Next 

Amelioration du select 

Jusqu'ici, dans chaque iteration de la boucle from (dans la partie Linq de nos instruc- 
tions), nous avons retenu l'ensemble de la balise Personnage (a cause du simple sel ect p). 
Cependant, il est possible de ne retenir qu'un ou plusieurs champs de cet element : 

var listeNoms = from p in xml .ElementsC'Personnage") 

select p.ElementC'Nom") .Value; 
foreach (var s in listeNoms) .. nom dans s. Value .. 

Ici, nous n' avons rencontre aucun probleme car chaque personnage a un nom mais il n'en 
serait pas de meme pour les prenoms, pour lesquels il faudrait alors ecrire (nul 1 est insere 
dans la liste des prenoms pour chaque personnage qui n'a pas de prenom) : 

var listePrenoms = from p in xml .ElementsC'Personnage") 

select p.ElementCPrenom"); 
foreach (var s in listePrenoms) 

if (s != null) prenom dans s. Value .. 

else pas de prenom pour ce personnage .. 

Convertir le resultat d'une recherche en un tableau ou une liste 



Le resultat d'une operation Linq peut etre copie dans un tableau ou une liste (autre ment 
dit, un conteneur .NET) : 
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var listeNoms = from p in xml .ElementsCPersonnage") 

select p. El ement( "Nom" ) . Val ue; 
List<string> liste = 1 isteNoms .ToList( ) ; 

Le nombre d'articles dans la liste est alors donne par liste. Count (sans parentheses ici). 
Le deuxieme nom dans cette liste est donne par 1 i ste[l]. 

Le resultat de l'operation Linq peut etre copie dans un tableau, ici un tableau de chaines 
de caracteres (tableau qu' il ne sera pas possible d' agrandir par la suite, contrairement a la 
liste generique). En C#, cela donne : 

var listeNoms = from p in xml .ElementsCPersonnage") 

select p. El ementt "Nom" ) .Val ue; 
string[] ts = 1 isteNoms .ToArray( ) ; // nom du deuxieme personnage dans ts[l] 

Et en VB : 

Dim listeNoms = From p In xml .ElementsCPersonnage") _ 

Select p. El ementt "Nom" ) .Val ue 
Dim ts As StringO = listeNoms. ToArrayO ' nom du deuxieme personnage dans ts(l) 

Creation d'objets d'une classe a partir de balises 

Nous allons maintenant creer une classe contenant les principales informations relatives a un 
personnage (informations retenues sous forme de proprietes). Pour creer une nouvelle 
classe dans le programme Silverlight, cliquez droit sur la partie Silverlight du projet dans 
l'Explorateur de solutions, selectionnez Ajouter>Nouvel element... >Classe et nommez 
le fichier de cette nouvelle classe Pers .cs. 

public class Pers 
{ 

public string Nom { get; set; } 
public string Prenom { get; set; } 
public int AnneeCreation { get; set; } 

} 

La classe Pers contient trois proprietes. Avec la syntaxe plus condensee introduite en C# 
version 3, les champs prives qui correspondent a ces proprietes sont automatiquement 
crees par le compilateur, ainsi que les fonctions associees en get et/ou set aux proprietes. 

Nous allons a present passer en revue les personnages et creer une liste d'objets Pers. 
Pour chaque balise Personnage, il convient de creer un nouvel objet Pers, dont les trois 
proprietes sont initialisers a partir du contenu des balises (certains contenus peuvent etre 
null) : 

var listePers = from p in xml .ElementsCPersonnage") 
select new Pers 
f 

Nom = (string)p. El ement( "Nom" ) , 
Prenom = (string)p.ElementCPrenom") , 
AnneeCreation = (int)p.ElementCCreation") 
}; 
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La relation est ici directe entre les champs d'un objet Pers et les balises situees sous la 
balise Personnage, mais elle pourrait etre plus complexe (voir l'exemple ci-dessous). 
Nous balayons maintenant 1 i stePers (liste d'objets Pers) et, pour chaque objet el (de type 
Pers), nous accedons a ses differentes proprietes : 

foreach (var el in listePers) 

{ 

. . nom dans el .Nom . . 

.. prenom dans el.Prenom (eventuel 1 ement null) .. 

.. annee de creation dans el .AnneeCreation .. 

} 

Pour les balises Personnage sans prenom, el.Prenom vaut null (cela ne pose pas de 
probleme puisque el .Prenom designe une reference a une chaine de caracteres et que nul 1 
dans une reference signifie « pas de chaine »). 

Mais que se passerait-il si une balise Personnage ne contenait pas de balise Creation, qui 
compte une valeur de type « entier » et ne peut done contenir une valeur nul 1 (Nothi ng en 
VB), contrairement aux objets et chaines de caracteres ? II faudrait en tenir compte (sous 
peine de voir le run-time Silverlight generer une exception) et ecrire : 

var listePers = from p in xml .ElementsC'Personnage") 
select new Pers 

{ 

Nom = (string)p.Element("Nom") , 
Prenom = (string)p.ElementCPrenom"), 
AnneeCreation = p.ElementCCreation") !=null ? 

(int)p.ElementCCreation") : -1 

}; 

Cela signifie que nous balayons les balises Personnage et que, pour chacune d'elles, la 
propriete AnneeCreation de l'objet Pers ainsi cree prend la valeur suivante : si la balise 
Creation est presente (p. El ement ( "Creation" ) est alors different de nul 1), ce champ prend 
la valeur donnee par p.ElementCCreation") mais convertie en un entier; dans le cas 
contraire, ce champ prend la valeur —1 (valeur choisie par convention pour signaler une 
absence de valeur). 

Les contraintes et les tris 

Linq, a l'instar du langage SQL, permet de specifier des contraintes et des tris. Ainsi, pour ne 
retenir que les personnages crees apres 1960 et les trier par ordre croissant d'anciennete, 
on ecrit : 

var listePers = from p in xml .ElementsC'Personnage") 

where (int)p.Element("Creation") > 1960 
orderby (int)p.Element("Creation") ascending 
select new Pers 
{ 

Nom = (string)p. El ementt "Nom" ) , 
AnneeCreation = (int)p.Element("Creation") 
}; 
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foreach (var el in listePers) 
{ 

. . nom dans el .Norn . . 

.. annee de creation dans el .AnneeCreation .. 

} 

La partie Linq de notre programme pourrait faire reference a des variables du programme 
(Linq est en effet parfaitement integre a C# et VB). Ainsi, la requete precedente pourrait 
s'ecrire en C# : 

int N = 1960; 

var listePers = from p in xml .ElementsC'Personnage") 
where (int)p.Element("Creation") > N 
orderby (int)p.Element("Creation") ascending 
select new Pers 
{ 

Nom = (string)p. El ement( "Nom" ) , 
AnneeCreation = (int)p.Element("Creation") 
}; 

Et en VB : 

Dim N As Integer = 1960 

Dim listePers = From p In xml .Elements("Personnage") _ 

where CInt(Fix(p.Element("Creation"))) > N 
orderby Unteger)p.Element("Creation") ascending _ 
select New Pers With _ 
{ _ 

.Nom = CStr(p. El ement( "Nom" ) ) , _ 

.AnneeCreation = CInt(Fix(p.Element("Creation")))_ 

} 
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Les acces distants 

La plupart des applications Web (banques, agences de voyages, commerces, etc.) affi- 
chent des donnees qui proviennent en general d'une base de donnees, laquelle peut se 
trouver sur une machine particuliere que Ton appelle le serveur de bases de donnees. II 
est evidemment hors de question d'installer ou de deporter toute cette base de donnees 
(et meme une partie de celle-ci) sur la machine du client. 

En programmation serveur, le programme ASP.NET ou PHP (qui s' execute sur le 
serveur) analyse la requete d'un client (et il en traite un grand nombre, venant de partout 
dans le monde), accede a la base de donnees, en extrait des donnees, les formate dans une 
page HTML (souvent en tenant compte des particularites et des droits d' acces du client) 
et envoie celle-ci au client. 

Une application Silverlight2 (qui s' execute sur la machine du client et ne traite done 
qu'un seul client) reclame des donnees d'un serveur. Celui-ci (bien entendu apres les 
verifications d'usage) les extrait de la base de donnees et les envoie a 1' application Silver- 
light, generalement au format XML. L application Silverlight decortique ensuite le XML 
et se charge de la presentation des donnees, eventuellement en y integrant des effets 
d' animation (impossibles a realiser en programmation serveur). 

Dans ce chapitre, nous allons etudier une technique (basee sur l'objet WebCl i ent) permet- 
tant de lire un fichier se trouvant sur une machine distante (image, fichier XML, etc.) ou 
d'obtenir une selection de donnees operee sur la base de donnees, laquelle se trouve sur 
un serveur et n'est pas directement accessible par les applications (Silverlight ou autres). 



250 



Silverlight 2 



A cet effet, l'application Silverlight reclame l'execution d'un service qui se trouve (dans 
une fonction, sous forme de code) quelque part sur un site serveur Internet. On dit que 
l'application Silverlight appelle un service Web. La technique n'est pas propre aux appli- 
cations Silverlight car elle est plus generale et peut etre adoptee par les applications 
Windows, les applications ASP.NET qui s'executent sur le serveur ainsi que celles, s'il 
en reste, qui s'executent en mode console. 

Comment une application Silverlight qui s' execute sur la machine d'un client peut-elle 
reclamer l'execution d'une fonction qui se trouve quelque part sur le Web ? Tout simple - 
ment en effectuant une requete, semblable a une requete permettant d'obtenir une page 
Web mais avec 1' extension .asmx. Elle passe ensuite des arguments a cette fonction 
distante en formatant des donnees en attributs de l'URL (sous la forme ?xyz=. . .). Le 
serveur renvoie alors la reponse en la formatant dans du XML, avec des noms de balises 
definis dans le protocole des services Web. 

L'objetWebClient 

Application a la lecture d'une image 

Lobjet WebCl ient permet de reclamer le contenu d'un fichier (ou ce que le serveur veut 
bien vous envoy er) de maniere asynchrone arm de ne pas bloquer l'application Silver- 
light durant l'operation (qui prend un « certain temps » puisqu'il y a acces au Web). Ainsi, 
l'utilisateur n'a pas le sentiment perturbant que l'application « ne repond plus », meme 
temporairement. D'ou vient ce « un certain temps » ? Meme si les choses se passent 
aujourd'hui sur des lignes de transmission a grande vitesse et sur des serveurs tres perfor- 
mants, lancer une requete sur le Web, attendre son tour sur le serveur dans la file d'attente 
des multiples requetes, acceder aux donnees sur le disque serveur et renvoyer le tout au 
client prend « un certain temps ». II est done imperatif que l'application Silverlight ne 
paraisse pas bloquee durant ce laps de temps. 

Considerons le composant Image suivant qui, pour le moment, affiche l'image VG1 . jpg, qui se 
trouve en ressource et est done injectee dans le fichier XAP de l'application Silverlight : 

<Image x:Name="img" Source="VGl . jpg" /> 

Nous allons charger dans ce composant l'image VG2.jpg qui a ete copiee dans le reper- 
toire CI ientBin de l'application Web. Cette image ne se trouve done pas en ressource et 
n'a pas ete greffee au fichier XAP (mettre une image en ressource n'a d'interet que si 
Ton est certain qu'elle sera affichee dans la page). 

Pour reclamer et lire ce fichier image situe sur le serveur, il faut : 

• creer un objet WebCl ient ; 

• indiquer l'emplacement (sous la forme d'une URL) de l'image sur le serveur (ici, un 
emplacement relatif, par rapport a l'emplacement du fichier XAP) ; 

• lancer l'operation (qui sera executee parallelement, done de maniere asynchrone, a 
l'application Silverlight) ; 
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• indiquer la fonction a executer lorsque l'operation est terminee, ce qui est necessaire 
puisque les choses se passent de maniere asynchrone (c'est en effet dans cette fonction 
que nous allons recuperer les dizaines de milliers d'octets constituant l'image et 
permettant de la reconstruire). 

Un objet WebCl i ent peut reclamer du serveur : 

• une chaine de caracteres avec la fonction DownloadStringAsync de la classe WebClient, 
convenant notamment pour lire le contenu d'un fichierXML (puisque celui-ci est 
constitute de lignes de texte) ; 

• un flux d'octets (stream) avec OpenReadAsync, convenant pour les images. 

Dans notre cas (lecture d'un fichier image), nous allons evidemment utiliser OpenReadAsync 
(la reponse est loin d'etre une simple chaine de caracteres) et convertir la suite d'octets 
ainsi recue en un objet Bitmaplmage (ce que nous avons deja fait a la section « Lire une 
image a partir du systeme de fichiers local » du chapitre 7). Void le code C# correspondant : 

using System. Net; // pour WebClient 

using System. Windows. Media. Imaging; // pour Bitmaplmage 



WebClient client = new WebClientO; 
cl i ent . OpenReadCompl eted 

+= new OpenReadCompl etedEventHandl er(cl ient_OpenReadCompl eted) ; 
client. OpenReadAsync(new Uri ( "VG2.jpg" , UriKind. Relative)); 



void cl ient_OpenReadCompleted(object sender, OpenReadCompl etedEventArgs e) 

{ 

try 

{ 

Bitmaplmage image = new Bitmaplmage( ) ; 
i mage. SetSourcete. Result) ; 
img. Source = image; 

} 

catch (Exception exc) 
{ 

// erreur lors de 1 'acces, avec message d'erreur dans exc. Message 

} 

} 

OpenReadAsync lance l'execution. L'URL du fichier image est passee en argument (seul 
argument ou premier de deux), sous forme d'un objet Uri. 

Un second argument, de type object et qui peut done etre n'importe quoi, peut etre ajoute 
a la fonction OpenReadAsync. On retrouve cet argument tel quel dans e.UserState dans la 
fonction traitant l'evenement OpenReadCompl eted. II permet de lancer plusieurs requetes 
asynchrones avec la meme fonction de traitement. 

La fonction client_OpenReadAsyncCompleted est automatiquement executee aussitot apres 
reception du dernier octet des donnees (ou plus tot, en cas d'erreur). Dans cette fonction 
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de traitement, les erreurs (fichier non trouve ou au mauvais format) doivent etre intercep- 
tees dans un try / catch. 

Si tout s'est bien passe, e. Result fait reference au flux d'octets telecharge depuis le 
serveur. Dans notre cas, un objet Bitmaplmage est cree a partir de tous ces octets ainsi 
recus (un octet transmis pour chaque octet dans le fichier image). 

La meme chose en VB : 

Imports System. Net ' pour WebClient 

Imports System. Windows. Media. Imaging ' pour Bitmaplmage 



Dim client = New WebClientO 

client. OpenReadAsync(New Uri ( "VG2.jpg" , UriKind. Relative) , 0) 
AddHandler client. OpenReadCompleted, AddressOf cl ient_OpenReadCompleted 



Private Sub cl ient_OpenReadCompleted(ByVal sender As Object, _ 

ByVal e As OpenReadCompl etedEventArgs ) 

Try 

Dim image As New Bitmaplmage ( ) 
i mage. SetSource(e. Result) 
img. Source = image 
Catch exc As Exception 

' message d'erreur dans exc. Message 

End Try 
End Sub 



Application a la lecture d'un fichier XML 

Nous allons maintenant lire un fichier XML se trouvant sur le serveur, dans le repertoire 
Cl i entBi n de 1' application. Nous disposons du fichier XML suivant qui a ete copie sur le 
serveur (si vous utilisez le Bloc-notes pour le creer, n'oubliez pas de l'enregistrer au 
format UTF8, sous peine de perdre les lettres accentuees) : 

<?xml version="l .0" encoding="utf-8" ?> 
<Arti stes> 
<Artiste> 

<Nom>Brel</Nom> 

<AN>1929</AN> 
</Artiste> 
<Artiste> 

<Nom>Brassens</Nom> 

<AN>192K/AN> 
</Artiste> 
<Artiste> 

<Nom>Ferre</Nom> 

<AN>1916</AN> 
</Artiste> 
</Artistes> 

Pour lire le contenu de ce fichier XML, nous utilisons la meme technique que precedemment, 
mais cette fois avec DownloadStringAsync puisque nous lisons de simples lignes de texte : 
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using System. Net; 



WebClient client = new WebClientO; 
cl i ent . Downl oadStri ngCompl eted 

+= new Downl oadStringCompl etedEventHandl er(cl ient_DownloadStri ngCompl eted) ; 
cl i ent. Downl oadStringAsync(new Uri ( "Artistes .xml " , Uri Kind. Rel ati ve) ) ; 



void client_DownloadStringCompleted(object sender, 

Downl oadStri ngCompl etedEventArgs e) 

{ 

try 

{ 

string s = e. Result; 

.. contenu du fichier XML dans s .. 

} 

catch (Exception exc) 
{ 



} 

} 

Si tout s'est bien passe (pas d'entree dans le catch), le contenu du fichier XML se 
retrouve dans e. Result. Comme pour OpenReadAsync, il est possible de passer a Downl oad- 
Stri ngAsync un deuxieme argument, de type object. On retrouve la valeur inchangee de 
cet argument, dans e.UserState, dans la fonction de traitement de l'evenement Download- 
StringCompleted. 

II nous reste a decortiquer ce contenu (voir chapitre 12) : 
using System. Xml .Linq; 



XElement xml = XElement.Parse(s) ; 

var 1 i steArti stes = from p in xml . El ements( "Arti ste" ) select p; 

foreach (var p in 1 i steArti stes) 

{ 

.. nom dans p.Element("Nom").Value .. 

.. annee de naissance dans p.Element("AN").Value .. 

} 

La meme chose en VB : 
Imports System. Xml . Linq 



Dim client = New WebClientO 

client. DownloadStringAsync(New Uri ( "Artistes .xml " , UriKind. Relative), 0) 
AddHandler client. DownloadStringCompleted, _ 
AddressOf cl ient_Downl oadStri ngCompl eted 



Private Sub client_DownloadStringCompleted(ByVal sender As Object, 

ByVal e As DownloadStringCompletedEventArgs) 

Try 

Dim s As String = e. Result 
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Dim xml As XElement = XElement.Parse(s) 

Dim 1 isteArtistes = From p In xml .Elements ("Artiste") _ 

Select p 
For Each p In listeArtistes 
.. nom dans p. El ementt "Nom" ) .Val ue .. 
.. annee de naissance dans p. El ement( "AN" ) .Val ue 
Next p 
Catch exc As Exception 

End Try 
End Sub 

Application a un service Web meteo 

Le site http://www.webservicex.net fournit un certain nombre de services Web, notam- 
ment un service meteo pour un grand nombre de villes du monde entier. Avec la techni- 
que des services Web, 1' application Silverlight appelle une fonction qui se trouve quelque 
part sur Internet. 

La page http://www.webservicex.net/WCF/ServiceDetails.aspx?SID=48 fournit des infor- 
mations sur le service Web meteo, mettant a disposition de ses clients (service gratuit) 
deux fonctions : 

• GetCitiesByCountry qui indique les villes d'un pays pour lesquelles des informations 
d'ordre meteorologique sont disponibles (plus d'une centaine de villes pour la France) ; 

• Getweather qui donne la meteo pour une ville particuliere. 

Ces deux fonctions s'executent quelque part sur un serveur Internet. Peu importe ou, peu 
importe le langage dans lequel elles sont ecrites et peu importe la representation des 
donnees en memoire (ainsi un nombre entier peut avoir une representation binaire diffe- 
rente sur le serveur et sur la machine du client, car le nombre d' octets et leur ordre depen- 
dent du microprocesseur et du systeme d' exploitation). Ces fonctions sont appelees en 
specifiant une URL, comme pour la requete d'une page Web (mais avec l'extension . asmx). 
Les donnees sont renvoyees au format XML, independant des representations en memoire 
des donnees puisque au format texte. 

La figure 13-1 represente la page Web donnant les informations relatives au service Web 
meteo. 

Avant meme d'ecrire la moindre ligne de code, il est possible de tester ces services Web et 
d' examiner la reponse, qui est au format XML. Cette possibility n'est pas propre a ce service 
Web : il s'agit d'une fonctionnalite offerte par tous les services Web et qui devient automati- 
quement disponible des que, sur le serveur, une fonction est marquee comme « service 
Web » (et est done susceptible d'etre appelee par un programme - pas seulement Silver- 
light - s' executant sur une machine connectee a Internet). 

Toujours en interactif, testons la fonction Web GetCitiesByCountry. Pour cela, saisissez 
un nom de pays (en anglais) dans le champ CountryName et appelez la fonction distante en 
cliquant sur le bouton Invoke (figure 13-2). 
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Figure 13-1 
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Click here for a complete list of operations. 



GetCitiesByCountry 

Get all major cities by country nameffull / part). 
Test 

To test the operation using the HTTP POST protocol, click the 'Invoke' button. 
Parameter Value 

CountryName: j | 

Invoke | 



SOAP 
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Apres avoir teste la fonction GetCitiesByCountry en interactif sur Internet, le paquet de 
donnees suivant est recu pour la France (seul un fragment, avec les deux premieres villes, 
est presente ici) : 

<?xml version="1.0" encoding="utf-8" ?> 
<string xml ns="http://www.webserviceX. NET"> 
<NewDataSet> 
<Table> 
<Country>France</Country> 
<City>Le Touquet</City> 
</Table> 
<Table> 
<Country>France</Country> 
<City>Agen</City> 
</Table> 



</NewDataSet> 
</string> 

Nous allons maintenant tester, toujours en interactif, la fonction GetWeather afin d'examiner 
le XML de reponse. Cette fonction admet un nom de ville et un nom de pays en arguments. 
Considerons ici que ces arguments sont Pari s (non repris dans la centaine de villes francaises) 
et France. Le XML recu est alors le suivant (figure 13-3). 

Figure 13-3 
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Dans le cas d'une ville reprise dans la centaine de villes francaises (ici Nantes), le XML 
aurait ete le suivant (voir figure 13-4). 

Voyons comment retrouver ces informations par programme et en premier lieu la liste 
des villes. Dans la reponse XML, il faut tenir compte du fait que les symboles < et > ont 
ete remplaces par &1t; et > afin qu'ils ne soient pas interpretes par le navigateur 
comme les caracteres de debut et de fin de balise. Pour resoudre ce probleme, il suffit 
d'effectuer un remplacement et de tenir compte de l'espace de noms (attribut xml ns de la 
balise string) mentionne dans la reponse XML. Pour decortiquer la reponse, Linq sera 
utilise (voir chapitre 12). 
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Figure 13-4 
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<?xml version="1.0" encodinq = "utf-0" ?> 

<string xmlns="http://www.webserviceX.NET"X7xml version = "1.0" encoding = "utf- 
16"?> <CurrentWeather> <Location>Nantes, France (LFRS) 47-10N 001-36W 
27M«c/l_ocation> <Time>Apr 29, 2008 - 07:00 AM EDT / 2008.04.29 1100 
UTC</Time> <Wind> from the S (190 degrees) at 16 MPH (14 KT):0</Wind> 
<Visibility> greater than 7 mile(s):0</Visibility> <SkyConditions> mostly 
cloudy</SkyConditions> <Temperature> 51 F (11 C)c/Temperature> <DewPoint> 
50 F (10 C)</DewPoint> <RelativeHumidity> 93»/o</RelativeHumidity> 
<Pressure> 29.50 in. Hg (0999 hPa)</Pressure> <Status>Success</Status> 
</CurrentWeatherX/sUing> 
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Voici le code C# correspondant 



WebClient client = new WebClientO; 
cl ient. DownloadStringCompl eted 

+= new Downl oadStringCompletedEventHandl er(cl ient_Downl oadStringCompl eted) ; 
string url = "http://www.webServiceX.net/GlobalWeather.asmx/" 

+ "GetCitiesByCountry?CountryName=France" ; 
client. DownloadStringAsync(new Uri(url), 0); 



List<string> listeVilles; 

void client_DownloadStringCoinpleted(object sender, 

Downl oadStri ngCompl etedEventArgs e) 

{ 

try 

{ 

string s = e. Result; 

s = s.Replace("<", "<"); 

s = s.Replace(">", ">"); 

XDocument xml = XDocument.Parse(s) ; 

XNamespace xmlns = "http://www.webserviceX.NET"; 

var q = from p in xml . El ements(xml ns + "string") 

. El ements(xml ns + "NewDataSet" ) 

. El ements(xml ns + "Table") 
select p.Element(xmlns + "City" ) .Val ue ; 
listeVilles = q.Tol_ist<string>(); 

} 

catch (Exception exc) 
{ 

// traiter 1 'erreur 
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Ce qui s'ecrit en VB : 

Imports System. Xml . Li nq 
Imports System. Net 



Dim client = New WebClientO 
client. DownloadStringAsync( _ 

New Uri ("http://www.webServiceX.net/GlobalWeather.asmx/" 
& "GetCitiesByCountry?CountryName=France" ) , 0) 
AddHandler client. DownloadStringCompleted, _ 

AddressOf cl ient_Downl oadStringCompleted 



Dim listeVilles As List(0f String) 

Private Sub client_DownloadStringCompleted(ByVal sender As Object, _ 
ByVal e As DownloadStringCompletedEventArgs) 

Try 

Dim s As String = e. Result 
s = s.Replace("<", "<") 
s = s.Replace(">", ">") 
Dim xml As XDocument = XDocument.Parse(s) 
Dim xmlns As XNamespace = "http://www.webserviceX.NET" 
Dim q = From p In xml .Elementstxmlns + "string" ). El ementstxmlns 
+ "NewDataSet") .Elementstxmlns + "Table") _ 
Select p.Element(xmlns + "City") .Value 
listeVilles = q.ToListO 
Catch exc As Exception 

' traiter 1 'erreur 

End Try 
End Sub 

La deuxieme ville est donnee par 1 isteVil les[l] en C# et 1 isteVil les(l) en VB. 

Pour tester si le pays passe en argument (a la fin de l'URL, en valeur de CountryName) 
existe, il est possible d'ecrire (d'autres solutions existent) : 

if (xml .Elementstxmlns + "string" ). Fi rstt ). Val ue == "") 
s = "Pas de meteo pour ce pays"; 

Passons maintenant a la meteo pour une ville, information donnee par la fonction GetWeather, 
que nous allons d'abord tester en interactif (figure 13-5). 



GlobalWeather 



Click here for a complete list of operations. 



GetWeather 

Get weather report for all major cities around the world. 
Test 

To test the operation using the HTTP POST protocol, dick the "Invoke" button. 
Parameter Value 

CityName: j | 

CnirnrryNamp: | 



Invoke 
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Pour une ville particuliere d'un pays, par exemple Calvi, la reponse XML est : 

<?xml version="1.0" encoding="utf-8" ?> 
<string xmlns=" http://www.webserviceX.NET"> 
<?xml version="1.0" encoding="utf-16"?> 
<CurrentWeather> 
<Location>Calvi , France (LFKC) 42-32N 008-48E 58M</Location> 
<Time>May 01, 2008 - 01:30 PM EDT / 2008.05.01 1730 UTC</Time> 
<Wind> from the W (260 degrees) at 7 MPH (6 KT) (direction variable):0</Wind> 
<Visibility> greater than 7 mi 1 e(s) :0</Vi sibi 1 ity> 
<Temperature> 66 F (19 CX/Temperature> 
<DewPoint> 30 F (-1 CX/DewPoint> 
<Rel ati veHumi di ty> 25%</Rel ati veHumi di ty> 
<Pressure> 30.00 in. Hg (1016 hPa)</Pressure> 
<Status>Success</Status> 
</CurrentWeather> 
</string> 

Par programme, pour etre informe de la temperature a Calvi, il suffit d'ecrire : 

WebClient client = new WebClientO; 
cl i ent . Downl oadStri ngCompl eted 

+= new Downl oadStri ngCompl etedEventHandl er(cl ient_Downl oadStri ngCompl eted) ; 
string url = "http://www.webServiceX.net/GlobalWeather.asmx/" 
+ "GetWeather?Ci tyName=Cal vi&CountryName=France" ; 
client. DownloadStringAsync(new Uri(url), 0); 

Et dans la fonction de traitement (une balise intempestive a ete eliminee dans la reponse 
et la temperature exprimee en degres Celsius se trouve entre parentheses dans la balise 
Temperature) : 

string s = e. Result; 

s = s.Replace("<", "<"); 

s = s.Replace(">", ">"); 

s = s . Repl ace( "<?xml version=\"1.0\" encoding=\"utf-16\"?>" , ""); 

XElement xml = XElement.Parse(s) ; 

XNamespace ns = "http://www.webserviceX.NET"; 

string temp = xml .Elements(ns + "CurrentWeather" ) 

. El ements(ns+"Temperature" ) . Fi rst( ) . Val ue; 
// eliminer la valeur Fahrenheit (degres Celsius entre parentheses) 
int nl = temp. I ndexOf ("("); 
int n2 = temp. IndexOf ( " ) " ) ; 
temp = temp.Substringtnl + 1, n2 - nl-2); 

temp contient desormais la temperature en degres Celsius mais sous la forme d'une chaine de 
caracteres. Pour la convertir en un nombre entier, il suffit d'utiliser la fonction Parse de la 
classe Int32 : 

int temperature = Int32.Parse(temp) ; 
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Application au service Web Flickr 

Flickr de Yahoo! est un site de partage de photos bien connu des internautes. A condition 
d'etre inscrit (ce qui est gratuit), n'importe qui peut deposer ou visionner des photos, du 
moins celles en acces public. 

Flickr offre un service Web de telechargement de photos repondant a certains cri teres, 
service Web que nous allons exploiter ici. 

Pour pouvoir acceder a Flickr et a son service Web, il faut tout d'abord s'inscrire sur le 
site http : //www . f 1 i ckr . com et demander une adresse de courrier electronique Yahoo! (une 
adresse plus usuelle peut etre fournie pour recevoir le courrier). Flickr vous communique 
alors un identifiant et un mot de passe, lequel n'est pas necessaire pour visualiser des 
photos mises en partage. L' identifiant peut etre communique sans danger. 

La premiere etape consiste a reclamer la liste des photos repondant a un critere (une 
chaine de caracteres, ici dans sCrit) : 



WebClient client = new WebClientO; 
cl ient.DownloadStringCompleted 

+= new Downl oadStringCompl etedEventHandler(cl ient_Downl oadStringCompl eted) ; 
client. DownloadStringAsync(new Uri(url), 0); 

Flickr renvoie ensuite un fichier XML au format suivant (les . . . remplacent des valeurs 
qui n'ont aucun interet ici) : 

<?xml version="1.0" encoding="utf-8" ?> 
<rsp stat="ok"> 
<photos page="l" pages= M ..." perpage="100" total ="..." > 
<photo id="..." owner="..." secret="..." server^"..." farm="3" 

titles"..." ispublic="l" isfriend="0" i sfami ly="0" /> 
<photo id="..." owner="..." secret="..." server^"..." farm="3" 
title="..." ispublic="l" isfriend="0" i sfami ly="0" /> 



</photos> 



Lattribut stat de la balise rsp contient ok si la requete est acceptee (ce qui ne signifie pas 
que Flickr a trouve des photos qui correspondent au critere) et f ai 1 en cas d'erreur. 

Dans la fonction traitant l'evenement Downl oadStringCompl eted, la liste des titres associes 
aux douze premieres photos est obtenue au moyen du code suivant : 

var liste = from p in xml . Element( "rsp" ). Element( "photos" ). El ements( "photo" ) 

select p ; 
liste = liste. Take(12) ; 

.. nombre de photos donne par liste. Count( ) , soit ici 12 ou moins .. 




string cle = .. votre identifiant Flickr ici .. 
string url = "http://api.flickr.com/services/rest/" 

+ "?method=f 1 ickr .photos .sea rch&api_key=" 

+ cle + "&text=" + sCrit; 



</rsp> 
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foreach (var ph in liste) // on passe en revue les photos 

{ 

.. titre d'une photo dans ph. AttributeCtitle"). Value .. 

} 

Les autres attributs n'ont pas de signification pour nous mais servent a construire la 
chaine de caracteres donnant acces a la photo (voir l'avant-derniere instruction). La 
enieme photo (en supposant qu'elle existe) est obtenue par : 

string sFarm = 1 iste. El ementAt(N) . Attribute( "farm" ) .Val ue; 
string sServer = 1 iste. ElementAt(N) .Attribute( "server" ) .Val ue; 
string sld = 1 iste. ElementAt(N) .Attribute( "id" ) . Val ue; 
string sSecret = 1 iste. ElementAt(N) .Attribute( "secret" ) .Val ue; 
string sLIrl = "http://farm" + sFarm + ".static.flickr.com/" + sServer 

+ "/" + sld + "_" + sSecret + ".jpg"; 
ImageSource imgs = new System. Windows. Media. Imaging. Bitmaplmage(new Uri(sl)rD); 
img.SetVal ue( Image. Sou rceP rope rty, imgs) ; 



Le composant Image, dont le nom interne est img, contient desormais la enieme image en 
provenance de Flickr. 
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Creation d'un controle utilisateur 

Les controles utilisateurs (user controls en anglais) jouent le meme role que les fonctions 
en programmation : ils regroupent, en une seule entite, un ou plusieurs composants et 
offrent de ce fait des fonctionnalites particulieres. L'utilisateur d'un tel type de controle 
(un programmeur ou un graphiste) doit uniquement en connaitre les fonctionnalites, sans 
se preoccuper des details d'implementation. 

Pour illustrer la creation d'un controle utilisateur, nous allons creer une nouvelle applica- 
tion (SLProg) qui accueillera un tel controle. Celui-ci consistera en un bouton qui « swin- 
gue » lors du survol de la souris et qui s'agrandit temporairement au moment du clic. Ce 
controle utilisateur ne contient ici qu'un seul composant (un bouton) mais il pourrait en 
contenir plusieurs, qui formeraient alors une « boite noire ». 

Dans cette application Silverlight, nous inserons un controle utilisateur (vierge pour le 
moment mais qui sera complete par la suite). Pour cela, selectionnez le menu Ajouter> 
Nouvel element. . .>Contr61e utilisateur Silverlight a partir de la fenetre du projet (partie 
Silverlight). Modifiez le nom propose par defaut (SilverlightControll.xaml) en Bouton- 
QuiSwingue. Deux fichiers sont ainsi crees (en plus de Page.xaml et Page.xaml .cs, toujours 
presents dans le projet, pour la page Silverlight qui va accueillir le controle utilisateur) : 
BoutonQuiSwingue.xaml et BoutonQuiSwingue.xaml .cs (ou son equivalent en VB). 

Le fichier BoutonQuiSwingue.xaml contient a ce stade : 

<UserControl x:Class="SLProg.BoutonQuiSwingue" 

xmlns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 

xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 

Width="400" Height="300"> 

<Grid x:Name="l_ayoutRoot" Background="White"> 

</Grid> 
</UserControl> 
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Le fichier de code BoutonQuiSwingue.xaml.es contient, quant a lui, le code suivant (la 
version VB suit le meme schema) : 

using System; 

using System. Col lections. Generics; 

using System. Li nq; 

using System. Net; 

using System. Windows ; 

using System. Windows. Controls; 

usi ng System. Wi ndows . Documents ; 

using System. Windows. Input; 

using System. Windows. Media; 

using System. Windows. Media. Animation; 

using System. Windows. Shapes; 

namespace SLProg 

{ 

public partial class BoutonQuiSwingue : UserControl 
{ 

public BoutonQuiSwingue( ) 
{ 

Initial izeComponent( ) ; 

} 

} 

} 

On retrouve l'espace de noms du programme d'accueil (ici, SLProg) dans le controle utili- 
sateur. Dans la mesure ou l'objectif est ici d'utiliser ce controle dans n'importe quelle 
application Silverlight, il convient de transformer namespace SLProg en namespace gl Bou- 
tonQuiSwingue, ce qui implique une modification similaire dans le XAML du bouton 
personnalise (nous avons suivi l'usage voulant que Ton prefixe le nom d'une marque, ici 
avec des initiales, pour rappeler l'auteur ou l'editeur du composant personnalise. . .) : 

<UserControl x:Cl ass="gl BoutonQuiSwingue. BoutonQuiSwingue" 

Comme ce n'est pas a nous mais bien a l'utilisateur de decider de la taille du bouton 
« swingueur », supprimez les deux attributs Width et Height dans le XAML. 

Dans BoutonQui Swi ngue . xaml , ajoutez un bouton sans aucune particularite pour le moment : 

<Grid x:Name="LayoutRoot" Background="White"> 
<Button x:Name="b" Content="Swingueur" /> 

</Grid> 

Nous pouvons deja ajouter notre controle utilisateur (meme dans son etat inacheve) dans 
la page hote qu'est Page. xaml (page dont le conteneur est une grille, que Ton suppose deja 
decoupee en rangees et en colonnes). Pour cela, il convient tout d'abord d'ajouter le code 
suivant dans l'en-tete du fichier Page. xaml, en attribut de la balise UserControl : 



xmlns:gl="cl r-namespace:gl BoutonQui Swi ngue" 
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Ce code indique que les composants personnalises mentionnes dans l'espace de noms 
gl BoutonQuiSwingue seront utilises et que toute reference a ces controles personnalises se 
fera via le prefixe gl . 

On s'epargne souvent bien des soucis en controlant le plus tot possible, a chaque stade du 
developpement, que tout est correct. Une compilation (menu Generer>Regenerer la solution) 
nous rassure deja. 

Le composant personnalise est ensuite insere dans la page note qu'est Page.xaml : 

<gl : BoutonQuiSwingue Grid.Row="l" Grid. Col umn="l" /> 

Un bouton, encore tout a fait classique, est affiche dans la cellule en (1, 1). Son libelle est 
Swingueur, il provient de l'attribut Content du bouton b enfoui dans le controle utilisateur. 
Ce bouton s'adapte automatiquement a la taille de la cellule. 

Le bouton swingueur peut etre ameliore en traitant l'evenement MouseEnter. Le fichier 
BoutonQuiSwingue.xaml devient alors : 

<Button x:Name="b" Content="Swingueur" MouseEnter="b_MouseEnter" > 

</Button> 

tandis que la fonction bJiouseEnter est generee par Visual Studio dans le fichier Bouton- 
QuiSwingue.xaml .cs. 

Nous completons le fichier BoutonQuiSwingue.xaml en y ajoutant une transformation 
RotateTransform ainsi qu'une animation (stbRotate) d'une duree totale de deux secondes : 

<Grid x:Name="LayoutRoot" Background="White" > 
<Button x:Name="b" Content="Swingueur" RenderTrinsform0rigin="0.5, 0.5" 

MouseEnter="b_MouseEnter" > 
<Button.Resources> 
<Story board x:Name=" stbRotate" Story boa rd.TargetName="rotBouton" 
Story boa rd.TargetProperty="Angl e" > 
<DoubleAni mat ionUsing Key Frames > 
<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" /> 
<LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="-30" /> 
<LinearDoubleKeyFrame KeyTime="0:0:2" Value="30" /> 
<LinearDoubleKeyFrame KeyTime="0:0:2.5" Value="0" /> 
</Doubl eAnimationUsingKeyFrames> 
</Storyboard> 
</Button.Resources> 
<Button . RenderTransf orm> 
<RotateTransform x: Name="rotBouton" /> 
</Button. RenderTransf orm> 
</Button> 
</Grid> 
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Dans la fonction traitant l'evenement MouseEnter adresse au bouton swingueur, il suffit de 
lancer 1' animation : 

private void b_MouseEnter(object sender, MouseEventArgs e) 
{ 

stbRotate.Begin( ) ; 

} 

Des que la souris entre dans la surface du bouton, ce dernier enclenche un mouvement de 
balancier (de —30 a +30 degres). Un fond blanc apparait lors du mouvement, ce qui pour- 
rait etre corrige en ajoutant une balise Rectangle (sans mention de Width et de Height pour 
une adaptation automatique de taille mais avec un attribut Fill) comme premiere balise a 
l'interieur de Grid dans le fichier BoutonQuiSwingue.xaml . 




Le libelle est toujours Swingueur. Ameliorons cela en creant une propriete dans la classe 
BoutonQuiSwingue : 

public partial class BoutonQuiSwingue : UserControl 

{ 



public string Libelle 
{ 

get { return b. Content. ToString( ) ; } 
set { b. Content = value; } 

} 

} 

L'utilisateur du bouton swingueur voit la propriete Libel 1 e qui apparait dans l'aide contex- 
tuelle lors de la construction d'une balise gl : BoutonQuiSwingue et n'a pas a se preoccuper 
des details d' implementation. En revanche, le programmeur du controle personnalise sait 
que Libelle est lie a la propriete Content (ici, limitee a du texte) du bouton b « cache » 
dans le bouton swingueur. 

Dans la page hote, les balises des boutons swingueurs deviennent par exemple (rempla- 
cez par d'autres attributs comme FontFamily, FontSize, Foreground, etc.) : 

<gl :BoutonQuiSwingue Libel le="Mon premier bouton swingueur" /> 

<gl :BoutonQuiSwingue /> 

Le libelle du deuxieme bouton swingueur est reste Swingueur, sa valeur par defaut. 
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Traitement d'evenements lies a un controle utilisateur 

Traitons maintenant l'evenement Click adresse au bouton b dont la taille augmente au 
moment du clic grace a une animation (stbScal e) d'une duree de deux secondes (car nous 
avons fait passer AutoReverse a true). 

Ces effets sont ici bien evidemment exageres et trop longs mais c'est pour mieux les mettre 
en evidence et surtout montrer la simultaneity de ces effets lorsque plusieurs boutons 
swingueurs sont places dans une page Silverlight (ici, sans reprendre en integralite le 
code de 1' animation stbRotate) : 

<Button x:Name="b" Content="Swingueur" RenderTransform0rigin="0.5, 0.5" 
MouseEnter="b_MouseEnter" Click="b_Click" > 
<Button.Resources> 
<Storyboard x:Name="stbRotate" > 



</Storyboard> 

<Storyboard x:Name="stbScale" Storyboard.TargetName="scaleBouton" > 
<DoubleAnimation Storyboard.TargetProperty="ScaleX" 

From="l" To="1.3" Ouration="0:0:l" AutoReverse="True" /> 
<DoubleAnimation Storyboard.TargetProperty="ScaleY" 

From="l" To="1.3" Ouration="0:0:l" AutoReverse="True" /> 

</Storyboard> 
</Button . Resources> 
<Button . RenderTransf orm> 
<TransformGroup> 
<RotateTransform x:Name="rotBouton" /> 
<ScaleTransform x:Name="scaleBouton" /> 
</TransformGroup> 
</ Button . RenderTransf orm> 
</Button> 

La fonction de traitement de l'evenement Click adresse au bouton b enfoui dans le bouton 
swingueur devient alors : 

private void b_Click(object sender, RoutedEventArgs e) 

{ 

stbRotate. Stop( ) ; 
stbScale.Begint ) ; 

} 

A ce stade, un effet visuel est cree au moment du clic mais le programme utilisateur n'est 
toujours pas informe (l'evenement CI i ck n'est meme pas connu dans la balise gl : Bouton- 
QuiSwingue). 

Pour resoudre ce probleme, il convient de declarer dans la classe du bouton swingueur 
une variable de type « evenement » (event en anglais). Appelons CI ick cette variable, ce 
qui donne Click comme nom d'evenement. Tant mieux pour l'utilisateur qu'on puisse 
garder le meme nom. Celui-ci est en effet habitue au fait qu'un bouton (qu'il soit swin- 
gueur ou non) presente l'evenement CI ick et peu importe pour lui qu'en interne cela ait 
demande un traitement special. Tant que cet evenement n'est pas traite dans la balise 
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gl : BoutonQui Swi ngue dans la page note, cette variable contient la valeur null. Quand cet 
evenement est traite (attribut CI i ck avec nom de fonction en valeur), cette variable de la 
classe BoutonQuiSwingue prend comme valeur P« adresse de la fonction de traitement ». 
L'appel CI i ck( ) dans la fonction b_Cl i ck a pour effet d'appeler la fonction en ques- 
tion (avec des arguments qui sont l'objet sender concerne ainsi qu'un objet fournissant 
eventuellement des informations complementaires sur l'evenement). 

Pour cela, le code suivant est ajoute dans la classe BoutonQuiSwingue (dans le fichier 
BoutonQuiSwingue. xaml .cs) : 

public event EventHandl er Click; 

private void b_Click(object sender, RoutedEventArgs e) 
{ 

stbRotate.Stopt ) ; 
stbScal e. Begin( ) ; 

if (Click != null) ClickUhis, EventArgs . Empty ) ; 

} 

L'evenement Click peut maintenant etre traite dans la balise gl : BoutonQui Swi ngue dans la 
page hote : 

<gl :BoutonQuiSwingue x:Name=bMonBQS" Libelle="Mon premier bouton swingueur" .... 
Click="bMonBQS_Click" /> 

Et cette fonction de traitement est : 

private void bMonBQS_Cl i cktobject sender, EventArgs e) 
{ 

} 

Utilisation d'un controle utilisateur 

Notre controle utilisateur est constitue de deux fichiers : BoutonQuiSwingue. xaml et Bouton- 
QuiSwingue. xaml .cs. Pour l'utiliser dans une autre application Silverlight, il faut disposer 
de ces deux fichiers quelque part sur la machine de developpement. On ajoute alors le 
fichier XAML au projet de 1' application (partie Silverlight). Pour cela, selectionnez 
Ajouter>Element existant... et localisez le fichier BoutonQui Swi ngue. xaml . Le fichier de 
code est automatiquement ajoute. 

II faut encore ajouter une directive xml ns dans la balise UserControl en tete du fichier XAML 
de la page hote, qui est Page, xaml par defaut (pour rappel, gl BoutonQui Swi ngue est le nom 
donne a l'espace de noms mentionne dans le controle utilisateur) : 

<UserControl x:Class= 

xmlns= 

xml ns:gl ="cl r-namespace:gl BoutonQuiSwingue" > 



/UserControl > 
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Controle utilisateur DLL 

Cette solution presente l'inconvenient de devoir fournir les fichiers .xaml et .cs. Pour 
diverses raisons, on preferera souvent fournir un seul fichier compile (et plus precise- 
ment, sous la forme d'une DLL). Pour cela, il faut creer une « Silverlight Class Library » 
et non un projet d'application Silverlight comme nous l'avons toujours fait jusqu'a present. 
Pour creer cette Silverlight Class Library, selectionnez Fichier>Nouveau>Silverlight> 
Bibliotheque de classes Silverlight dans Visual Studio. Nommez ce projet BoutonQui- 
Swingue. 

Visual Studio cree automatiquement une classe nommee CI ass 1. Supprimez-la du projet 
en cliquant droit sur son nom dans l'Explorateur de solutions et en selectionnant Sup- 
primer. Cette classe sera remplacee par un controle utilisateur. Pour cela, selectionnez 
Ajouter> Element existant. . . dans l'Explorateur de solutions et localisez le fichier Bouton- 
QuiSwingue.xaml dans le repertoire du projet precedemment cree. Compilez ensuite via le 
menu Generer>Regenerer la solution, ce qui cree le fichier BoutonQuiSwingue.dll dans 
le sous-repertoire Bin/Debug. II suffit maintenant de fournir ce fichier DLL a l'utilisateur. 

Quand l'utilisateur cree une application Silverlight, il lui suffit de faire reference a cette 
DLL en allant dans l'Explorateur de solutions, menu Ajouter reference, et rechercher le 
fichier BoutonQuiSwingue.dll. II faut alors ajouter alabalise UserControl l'attribut : 

xml ns :gl ="cl r-namespace:gl BoutonQuiSwingue;assembly=BoutonQuiSwingue" 

Un tel bouton sera alors insere dans Page. xaml avec (par exemple) : 

<gl :BoutonQuiSwingue x:Name = "bBQS" "Libelle="Mon bouton qui swingue" 
FontFamily="Verdana" Foreground="Red" Click="bBQS_Click" 
ClickGrid.Row="l" Grid. Col umn="l" /> 

La DLL BoutonQuiSwingue.dll sera automatiquement greffee au fichier XAP envoye au 
navigateur. 
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Les styles 

Pour l'uniformite de la page Silverlight, il est generalement souhaitable que les compo- 
sants presentent des caracteristiques d'affichage communes. L'exemple de code suivant 
correspond a deux zones d' affichage en rouge et en police Verdana de taille 20 : 

<TextBlock Foreground="Red" FontFamily="Verdana" FontSize="20" /> 

<TextBlock Foreground="Red" FontFamily="Verdana" FontSize="20" /> 

Dans ce cas, plutot que de repeter les memes attributs d'un composant a l'autre, il est 
preferable de recourir aux styles. Ainsi, si la presentation doit etre personnalisee par la 
suite, il suffira de modifier le style (en un seul emplacement) plutot que de nombreux 
attributs en de nombreux emplacements du fichier XAML (avec le risque d'en oublier 
lors d'un changement ou d'effectuer des modifications intempestives). 

Les styles sont places en ressources, dans une balise xyz. Resources, ou xyz doit etre 
remplace par Grid, Canvas ou un nom de balise. Les styles deviennent ainsi communs : 

• aux composants d'un conteneur si le style est defini en ressource du conteneur dans la 
balise UserControl ; 

• a tous les composants de l'application si le style est defini en ressource de l'application. 

Moins utile (tout au moins dans ce chapitre) mais neanmoins possible : un style peut etre 
specifie dans la balise d'un composant particulier, par exemple une balise Button, mais 
toujours en ressource et alors sans attribut x: Key. 

Voyons comment specifier des styles (ici, un seul) dans le conteneur qu'est la grille 
(seules les zones d'affichage mentionnees dans la grille pourront faire reference au style 
StyleRouge, a cause de l'attribut TargetType) : 
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<Grid > 

<Grid.Resources> 
<Style x:Key="StyleRouge" TargetType="TextBlock" > 
<Setter Property="Foreground" Value="Red" /> 
<Setter Property="Background" Val ue="Beige" /> 
<Setter Property="FontFamily" Val ue="Verdana" /> 
<Setter Property="FontSize" Value="20" /> 
</Style> 
</Grid.Resources> 



</Grid> 

On donne un nom a chaque style (attribut x:Key) et on indique, ce qui est indispensable, 
quel type de composant est concerne (attribut TargetType). Chaque valeur d' attribut est 
mentionnee dans une balise Setter, avec le nom de 1' attribut en attribut de Property et sa 
valeur en attribut de Val ue. Plusieurs balises Styl e peuvent etre specifiees. 

Les deux balises TextBlock precedentes deviennent des lors : 

<TextBlock Style="{StaticResource StyleRouge}" /> 

<TextBlock Style="{StaticResource StyleRouge}" /> 

Des attributs, meme repris dans un style, peuvent etre specifies dans une balise. Dans ce 
cas, c'est l'attribut de la balise qui prime sur l'attribut de style. Par exemple (la zone 
d'affichage a ici un fond jaune) : 

<TextBlock Style="{StaticResource StyleRouge}" Background="Yellow" /> 

Les styles peuvent etre specifies (de la meme maniere) en ressources de 1' application, 
dans le fichier App.xaml du projet. lis s'appliquent alors a tous les composants de tous les 
conteneurs de 1' application : 

<Appli cation xmlns=" http://schemas.mi crosoft.com/client/2007" 

xmlns:x=" http://schemas.mi crosoft.com/winfx/2006/xaml " 
x:Class="SLProg.App" > 
<Appl i cation . Resources > 
<Style x:Key="StyleRouge" TargetType="TextBlock" > 
<Setter Property="Foreground" Value="Red" /> 



</Style> 

</Appl i cation . Resources> 
</Appl ication> 

L'attribut Val ue (dans une balise Setter) peut devenir a son tour une balise. Pour illustrer 
cette possibility, compliquons une propriete (ici, Background) en forcant un degrade : 

<Style x:Key="StyleRectDegr" TargetType="Rectangl e" > 
<Setter Property="Fi 11 " > 
<Setter.Value> 

<LinearGradientBrush StartPoint="0. 0.5" EndPoint="l, 0.5" > 
<GradientStop 0ffset="0" Color="Black" /> 
<GradientStop 0ffset="l" Color="White" /> 
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</LinearGradientBrush> 
</Setter.Value> 

</Setter> 
</Style> 

Pinceaux et couleurs en ressources 

D'autres elements que les styles peuvent etre places en ressources, par exemple, un pinceau : 

<Grid.Resources> 
<SolidColorBrush x:Key="PrinceauRouge" Color="Red" /> 
</Grid.Resources> 

Un element UI peut des lors faire usage du pinceau PinceauRouge : 

<TextBlock Foreground={StaticResource PinceauRouge}" /> 

Avec un exemple aussi simple, nous avons surtout complique les choses... Prenons un 
exemple plus probant. Un pinceau plus elabore peut etre cree, avec reference a des 
couleurs en ressources : 

<Grid.Resources> 
<Col or x: Key="Rouge">Red</Col or> 
<Col or x: Key="Bl eu">#FF0000FF</Col or> 
<LinearGradientBrush x:Key="PinceauDegr" > 
<GradientStop Offset="0" Color="{StaticResource Rouge}" /> 
<GradientStop Offset="l" Color="{StaticResource Bleu}" /> 
</LinearGradientBrush> 
</Grid.Resources> 



<Rectangle Fill="{StaticResource PinceauDegr}" /> 



Les templates 

Nous allons maintenant apprendre a modifier fondamentalement l'apparence de compo- 
sants mais sans changer quoi que ce soit au programme. En d'autres termes : la tache 
peut etre confiee a un graphiste sans risque de devoir retravailler ensuite le programme. 
Ce sera surtout impressionnant lorsque nous passerons a Expression Blend pour person- 
naliser un controle avec Visual State Manager. 

Partons d'un bouton simple, a l'apparence deja fort acceptable (figure 15-1) : 

<Button Content="G0 I" /> 

Figure 15-1 



CO ! 
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La propriete Content est ensuite redefinie afin de forcer l'affichage d'une image (ici, une 
image .png en ressource dont certaines parties sont transparentes, figure 15-2) : 

<Button > 

<Button.Content> 
<Image Source="Sport.png" /> 
</Button.Content> 

</Button> 

Figure 15-2 




Dans la balise Content, il est possible d'inserer n'importe quel type de conteneur, par 
exemple un StackPanel a orientation verticale (figure 15-3) : 

<Button > 

<Button .Content> 
<StackPanel> 
<Image Source="Sport.png" /> 

<TextBlock Text="Sport" Horizontal Al ignment="Center" /> 
</StackPanel> 

</Button.Content> 
</Button> 

Figure 15-3 




Sport 



Nous allons maintenant modifier bien plus fondamentalement l'apparence du bouton, en 
lui donnant une forme originale (ici, une ellipse pour ne pas compliquer inutilement 
l'expose mais la forme pourrait etre bien plus elaboree a l'aide d'un Path, voir la section 
« Le Path » du chapitre 8). 

Pour cela, il faut redefinir l'attribut Template du bouton, qui doit contenir une balise 
Control Tempi ate : 

<Button > 

<Button. Tempi ate> 
<Control Tempi ate> 
<Ellipse Fill="Gray" /> 
</Control Tempi ate> 
</Button. Tempi ate> 
</Button> 
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Figure 15-4 




Le bouton est maintenant limite a une ellipse grise (figure 15-4), ce qui est certes peu 
attrayant mais nous n'en sommes encore qu'au debut. Si l'utilisateur clique en dehors de 
l'ellipse, cela n'a aucun effet. En revanche, s'il clique dessus, un evenement CI ick est genere 
(rien de change done par rapport au fonctionnement initial), bien qu' aucun effet visuel ne 
signale a l'utilisateur que le clic a ete pris en compte. Nous reglerons cela bientot. 

Placons maintenant un texte a l'interieur de l'ellipse, ce qui est conforme a la pratique 
(figure 15-5) : 

<Button > 

<Button .Tempi ate> 
<ControlTempl ate> 
<Grid> 
<E1 1 Ipse Fin="Gray" /> 
<TextBlock Text="G0" Foreground="White" 
Horizontal Al ignment="Center" 
VerticalAlignment="Center" /> 

</Grid> 

</ControlTemplate> 
</Button .Tempi ate> 
</Button> 

Figure 15-5 ^^^^^ 



Ameliorons encore 1' aspect esthetique du bouton en introduisant un degrade radial, ce 
qui donne l'impression que le bouton est eclaire (figure 15-6) : 

<Button > 

<Button .Tempi ate> 
<ControlTempl ate> 
<Grid> 
<Ellipse > 
<Ellipse.Fill> 
<RadialGradientBrush Gradient0rigin="0.3, 0.3" > 
<GradientStop 0ffset="0" Color="White" /> 
<GradientStop 0ffset="l" Col or="Gray" /> 
</RadialGradientBrush> 
</Ellipse.Fill> 
</Ellipse> 
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<TextBlock Text="GO" Foreground="White" 

FontWeight="Bol d" Font Fami ly=" Verdana" 
Horizontal Al ignment="Center" 
VerticalAlignment="Center" /> 

</Grid> 
</ControlTemplate> 
</Button.Template> 
</Button> 

Figure 15-6 




L' ellipse s'agrandit si l'utilisateur place des valeurs plus elevees dans les attributs Width 
et Height de la balise Button ou (en l'absence de ces attributs Width et Height) s'il agrandit 
la fenetre du navigateur, ce qui augmente d'autant la cellule de la grille incorporant le 
bouton en forme d' ellipse. La police de caracteres reste neanmoins inchangee. 

Toutes ses caracteristiques d'affichage sont ensuite placees dans un style, ce qui n'est pas 
indispensable a ce stade mais de bonne pratique (cela serait indispensable pour que la 
nouvelle apparence s' applique a plusieurs boutons) : 

<Appl i cati on . Resources> 

<Style x:Key="styleBoutonOval" TargetType="Button" > 
<Setter Property="Template" > 
<Setter.Value> 

<ControlTempl ate> 
<Grid> 
<Ellipse > 
<Ellipse.Fill> 
<RadialGradientBrush Gradient0rigin="0.3, 0.3" > 
<GradientStop 0ffset="0" Color="White" /> 
<GradientStop 0ffset="l" Color="Gray" /> 
</RadialGradientBrush> 
</Ellipse.Fill> 
</Ellipse> 

<TextBlock Text="G0" Foreground="Orange" FontWeight="Bold" 
Font Fami ly=" Verdana" 

HorizontalAl ignment="Center" VerticalAl ignment="Center" /> 

</Grid> 
</ControlTemplate> 
</Setter.Value> 
</Setter> 
</Style> 
</Appl ication.Resources> 
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La balise du bouton ovale se resume maintenant a : 

<Button Styl e=" { Stati cResource styl eBoutonOval } " /> 

A ce stade, certaines choses sont encore assez fixes : le libelle du bouton est code « en 
dur » dans le style (inchangeable et done le meme pour tous les boutons) mais aussi la 
police, la couleur d'affichage du libelle, etc. II est evidemment indispensable de pouvoir 
prendre en compte les desiderata des utilisateurs (ici, des programmeurs ou des graphistes 
qui ont insere la balise Button dans le XAML). Pour cela, il convient d'utiliser les 
Tempi ateBinding. 

Un Tempi ateBinding permet de faire reference a des attributs de la balise du composant 
integrant le nouveau style. L'utilisateur de la balise (ici, Button) specifie alors des valeurs 
pour certains attributs (de la balise Button) mais il n'a pas a se preoccuper des details 
d' implantation de la nouvelle apparence du bouton. 

La balise : 

<TextBlock Foreground="{TemplateBinding Foreground}" /> 

qui fait partie de 1' implementation du bouton signifie que cette zone d'affichage trouve la 
valeur de son attribut Foreground dans l'attribut Foreground du bouton. 

Dans l'extrait de code suivant : 

• l'attribut Background de la balise Button indique comment sera peint le fond de l'ellipse 
(attribut Fi 1 1 de l'ellipse dans la nouvelle apparence) ; 

• l'attribut Foreground de la balise Button donne la couleur d'affichage du libelle (attribut 
Foreground du TextBlock cache dans le bouton) ; 

• meme chose pour FontSize. 

<Style x: Key="styl eBoutonOval " TargetType="Button" > 
<Setter Property="Templ ate" > 
<Setter.Value> 

<Control Tempi ate TargetType=" Button "> 
<Grid> 

<Ellipse Fill="{TemplateBinding Background}" /> 
<TextBlock Text="G0" 

Foreground="{Templ ateBinding Foreground}" 

FontSize="{Templ ateBinding FontSize}" 

FontWeight="Bold" 
Horizontal Al ignment="Center" 
VerticalAlignment="Center" /> 

</Grid> 
</Control Tempi ate> 
</Setter.Value> 
</Setter 
</Style> 
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La balise Button devient alors (par exemple) : 

<Button 

Background="Gray" Foreground="Whi te" 

FontSize="30" Style="{StaticResource styleBoutonOval}" 

/> 



Figure 15-7 




Le libelle du bouton (attribut Text du TextBlock enfoui dans l'unique cellule de la grille) 
ne peut pas encore etre personnalise. Pour corriger ce probleme, il convient de remplacer 
la balise TextBlock par une balise ContentPresenter qui indique comment le libelle (dans 
le cas le plus simple car il pourrait s'agir de la balise Content du bouton) doit etre affiche : 

<Style x:Key="styleBoutonOval " TargetType="Button" > 
<Setter Property="Templ ate"> 
<Setter. Value > 
<Control Tempi ate TargetType=" Button "> 
<Grid> 
<Ellipse > 
<Ellipse.Fill> 
<RadialGradientBrush Gradient0rigin="0.3, 0.3" > 
<GradientStop 0ffset="0" Color="White" /> 
<GradientStop 0ffset="l" Color="Gray" /> 
</ Radi al GradientBrush> 
</Ellipse.Fill> 
</Ellipse> 

<ContentPresenter Content="{Templ ateBinding Content}" 

Foreground="{Templ ateBinding Foreground}" 
FontSize="{Templ ateBinding FontSize}" 
FontWeight="Bold" Horizontal Al ignment="Center" 
Vertical Alignment="Center" /> 

</Grid> 
</ControlTempl ate> 
</Setter.Value> 
</Setter> 
</Style> 

La balise du bouton peut maintenant devenir (figure 15-8) : 

<Button 

Content="G0 !" 

Background="Gray" Foreground=" White" 

FontSize="30" Style="{StaticResource styleBoutonOval}" 

/> 
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Figure 15-8 

A noter qu'elle pourrait contenir une balise Content bien plus elaboree, qui serait reprise 
telle quelle dans le bouton. 

Donner un feedback visuel 

A ce stade, aucun signal visuel n'est encore fourni quand l'utilisateur clique sur le bouton 
ou lorsque la souris le survole. Voyons a present comment fournir ces signaux visuels. 

Arin de nous concentrer sur la maniere de realiser les transitions (par exemple, la transition 
de l'etat « normal » a l'etat « survol »), partons d'un style de bouton encore plus simple que 
celui de l'exemple precedent (ici, un bouton rectangulaire sans fioriture, figure 15-9) : 

<Button Styl e=" { Stati cResource styl eBouton} " 

Content="Bouton template" FontSize="20" Foreground="White" /> 

dont le style est : 

<Style TargetType="Button" x:Key="styleBouton"> 
<Setter Property="Templ ate"> 
<Setter.Value> 

<Control Tempi ate TargetType=" Button "> 
<Grid x:Name="RootElement"> 
<Rectangle Fi 1 1 ="DeepSkyBl ue" /> 
<Rectangl e x:Name="FocusVisual Element" 

Fill="Yellow" /> 
<ContentPresenter 

Content="{Templ ateBinding Content}" 
Foreground=" {Tempi ateBinding Foreground} " 
Font Fami ly=" Verdana" 
FontSi ze=" (Tempi ateBi ndi ng FontSi ze} " 
Horizontal Al ignment= "Center" 
VerticalAlignment="Center" /> 

</Grid> 
</ControlTemplate> 
</Setter.Value> 
</Setter> 
</Style> 



Figure 15-9 
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Nous avons defini deux rectangles (de maniere generale deux elements UI) correspondant 
a deux etats du bouton. Les noms internes (attribut x:Name) attribues a ces rectangles 
doivent etre : 

• RootEl ement pour la representation de l'etat « normal » ; 

• FocusVisual Element lorsque le bouton recoit le focus. 

Le bouton est ainsi uniformement bleu a l'etat normal et jaune lorsqu'il a le focus (la 
touche Entree du clavier a alors le meme effet qu'un clic sur le bouton). 

Nous allons ajouter des transitions et ameliorer encore l'apparence du bouton (difficile 
en effet d'y resister. . .). Pour cela, des bords arrondis sont specifies pour le bouton a l'etat 
« normal » ainsi qu'un effet de transparence (figure 15-10) obtenu a l'aide de deux couches 
(avec degrade de transparence sur le second rectangle, voir la section « Le masque 
d'opacite » du chapitre 4) : 

<Rectangle x:Name="Normall" 

Fill="DeepSkyBlue" RadiusY="5" RadiusX="5" /> 
<Rectangle x: Name="Normal 2" 

RadiusY="5" RadiusX="5" Stroke="Bl ack"> 
<Rectangle.Fill> 
< Li nearGradient Brush 
StartPoint="0.5,0" EndPoint="0.5,l"> 
< Li nearGradientBrush .Gradient Stops> 
<GradientStop Col or="#DOFFFFFF" Offset="0" /> 
<GradientStop Col or="#90FFFFFF" 0ffset="0.5" /> 
<GradientStop Col or="#60FFFFFF" 0ffset="0.5" /> 
<GradientStop Col or="#90FFFFFF" Offset="l" /> 
</LinearGradientBrush.GradientStops> 
</LinearGradientBrush> 
</Rectangle.Fill> 
</Rectangl e> 

Figure 15-10 . . 



Nous allons a present ajouter les transitions. Pour cela, il faut definir des story-boards aux 
noms bien precis et a la signification evidente (il s'agit en effet de creer des animations 
mais rien n'empeche qu'elles soient instantanees) : 

<Grid x:Name="RootElement"> 
<Grid.Resources> 

<Storyboard x: Key="MouseOver State"> 



</Storyboard> 

<Storyboard x:Key="Normal State"> 
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</Storyboard> 

<Storyboard x:Key="Pressed State"> 



</Storyboard> 

<Storyboard x:Key="Disabled State"> 



</Storyboard> 
</Grid.Resources> 
</Grid> 

Interessons-nous d'abord a l'etat « survol » qu'est MouseOver (quand la souris entre dans 
la surface du bouton) : 

<Storyboard x: Key="MouseOver State"> 
<Col or Animation Duration="0:0:0.3" 
Storyboard.TargetName=" Normal 1" 
Storyboard.TargetProperty= 

"(Rectangle. Fill ) . (Sol idColorBrush .Color) " 
To="Si 1 ver" 

/> 

</Storyboard> 

La transition specifiee dans cet extrait de code permet de modifier la couleur du premier 
rectangle en trois dixiemes de seconde. A noter qu'elle pourrait etre instantanee en speci- 
fiant 0 dans Duration. 

La ligne TargetProperty, meme si elle parait un peu plus compliquee, nous evite de devoir 
expliciter l'attribut Fill du rectangle Normal 1 et de devoir donner un nom a la couleur. 
Cette ligne peut done se lire : « dans l'attribut Fill du rectangle, un Sol idColorBrush et 
plus precisement son attribut Col or ». 

Modifions maintenant l'apparence du bouton qui a le focus : selon 1' usage, on trace une 
ligne en pointilles autour du libelle (figure 15-11) : 

<Rectangl e x :Name=" Focus Vi sual El ement" 



Au moment du clic sur le bouton (etat « presse »), nous epaississons sa bordure 
(figure 15-12) : 



RadiusY="5" RadiusX="5" Visibility="Collapsed" 
Stroke="White" StrokeThickness="2" 
StrokeDashArray="2 1" Margin="10" /> 



Figure 15-11 




<Storyboard x:Key="Pressed State"> 
<DoubleAnimation Duration="0:0:0" 
Storyboard.TargetName="Normal 2 
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Nous venons de voir comment realiser des boutons personnalises avec signaux visuels 
lors de changements d'etat. II n'y a plus qu'a faire preuve de creativite. . . 

Les styles des composants Silverlight de Microsoft 

La creativite se nourrissant des meilleurs exemples, il peut etre enrichissant de jeter un 
coup d'oeil aux styles crees par Microsoft pour ses composants Silverlight. Ceux-ci sont 
incorpores dans la DLL contenant le code des composants Silverlight. II ne reste done 
plus qu'a jouer au petit explorateur. . . 

Lutz Roeder a developpe pour cela Reflector for .NET, un fantastique outil de decompi- 
lation et d'exploration de programmes, y compris les DLL. Cet outil peut etre telecharge 
gratuitement a partir du site http://www.aisto.com/roeder/dotnet. 

Lancez Reflector en lui demandant d' analyser des DLL Silverlight. Les styles qui 
nous interessent sont stockes en ressources dans System. Windows. Controls, soit dans 
System. Windows. Controls. g. resources. Reflector signale que les styles proviennent de 
generic. xaml et vous propose d'enregistrer ce fichier sur le disque. 

Analysons maintenant le fichier generic. xaml ainsi cree. II contient les balises du bouton 
dans <Style Target="Button" >, ainsi que les styles par defaut pour CheckBox, ContentControl, 
Hyperl i nkButton, ListBox, Li stBoxItem, RadioButton, RepeatButton, ScrollBar, ScrollViewer, 
Toggl eButton et Tool Ti p. 

Modifier n'importe quel controle avec Expression Blend 

Modification de I'apparence 

En passant a Expression Blend, un graphiste peut modifier n'importe quel element de 
n'importe quel controle : son apparence mais aussi les transitions lors de changements 
d'etat (par exemple, un passage a l'etat MouseOver ou l'indication d'un clic). Ceci est 
rendu possible grace au Visual State Manager d'Expression Blend. 
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Pour illustrer cette fonctionnalite, partons d'un projet contenant une barre de defilement 
(figure 15-13), dont aucun attribut ne permet de modifier fondamentalement l'apparence : 

| <ScrollBar Width="200" Height="20" /> 
Figure 15-13 

Nous allons modifier le curseur (thumb en anglais), sachant que la technique est applica- 
ble a n'importe quelle partie constitutive de n'importe quel controle. Pour cela, passez 
tout d'abord a Expression Blend en effectuant un clic droit sur Page.xaml dans l'Explo- 
rateur de solutions de Visual Studio et en selectionnant Open in Expression Blend. 



Figure 15-14 
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Selectionnez ensuite le controle a modifier (figure 15-14), effectuez un clic droit dessus 
et choisissez Edit Control Parts (Template)>Edit a copy... (figure 15-15). Par la suite, il 
sera possible d'appliquer la modification a d'autres barres de defilement. 

Figure 15-15 




Dans la mesure oil il est impossible de modifier les styles utilises par defaut par Silver- 
light, il convient de travailler sur une copie de ceux-ci. Expression Blend vous propose 
d'attribuer un nom (ici, StyleSB) au style qui va etre cree suite aux modifications et de 
specifier s'il devra etre cree dans le fichier App.xaml ou Page.xaml (figure 15-16). 

Figure 15-16 
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Expression Blend affiche alors les elements de base (surtout des rectangles) qui partici- 
pent a la creation de la barre de defilement (figure 15-17). 

Figure 15-17 



*. StyleSB (ScrollBar Template) 



Q<$> Template I 
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Pour cet exemple, l'element HorizontalThumb va etre modifie : selectionnez-le agrandis- 
sez-le (figure 15-18). 

Pour le colorier, il faut aller plus en avant dans le HorizontalThumb, qui est compose de 
plusieurs elements. Pour les decouvrir, effectuez un clic droit sur l'element Horizontal - 
Thumb et selectionnez Edit Control Parts (Template)>Edit Template (figure 15-19). 
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Figure 15-18 
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Le curseur Horizontal Thumb est cree a partir d'une grille qu'il est possible de selectionner 
et de colorier (ici, un degrade du bleu au rouge avec le blanc comme couleur interme- 
diaire), comme nous l'avons vu au chapitre 3 (figure 15-20). 



Figure 15-20 
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Apres sauvegarde dans Expression Blend, retournez dans Visual Studio. Celui-ci detecte 
la modification effectuee dans Expression Blend et vous demande s'il faut en tenir 
compte. Le fichier App.xaml a ete automatiquement modifie pour y ajouter un style de 
barre de defilement. 

Apres compilation, la barre de defilement presente un curseur rectangulaire et peint avec 
le degrade specifie precedemment (figure 15-21). 



Figure 15-21 
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Modification des transitions 

II est possible, avec Expression Blend, de modifier les animations (eventuellement 
instantanees) lors du passage d'un etat a un autre (par exemple, lors de 1' entree de la 
souris dans la surface du composant ou au moment du clic, pour donner une indication 
visuelle a l'utilisateur). 

Pour illustrer le sujet, nous allons realiser l'animation suivante : lorsque l'utilisateur 
clique sur un bouton (passage a l'etat Pressed), celui devient plus petit puis reprend aussi- 
tot son etat normal. 

Partons du bouton suivant : 

<Button x:Name="bGo" Content="G0" Width="80" Height="60" /> 

et passons directement a Expression Blend en cliquant droit sur le fichier Page.xaml et en 
selectionnant Ouvrir dans Expression Blend (figure 15-22). 
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Creez ensuite un style pour ce bouton, base sur le style general (existant) des boutons. 
Pour cela, effectuez un clic droit sur le bouton et selectionnez Edit Control Parts 
(Template)>Edit a Copy... (figure 15-23). 

Figure 15-23 




Attribuez un nom a ce style (BoutonRessort, figure 15-24). 
Figure 15-24 



Create Style Resource 



Name (Key) 



RoutonRpwnrt 



Application 




• This document UserControl: <no n; I 
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Expression Blend est maintenant pret a creer un nouveau style. Nous pourrions modifier 
chaque element constitutif du bouton (ils apparaissent dans le panneau Objects and 
Timeline) mais aussi les animations lors de changements d'etat (dans le panneau Interac- 
tion, figure 15-25) : 



Figure 15-25 




Les styles et les templates J 

Nous allons modifier l'animation qui indique a l'utilisateur que le bouton a bien ete 
presse (etat Pressed). Pour travailler plus confortablement, agrandissez (a 400 %, 
figure 15-26) la surface de travail (tout se passe en effet dans le bouton). 
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Au moment du clic, le bouton deviendra nettement plus petit. Comme c'est tout le bouton 
qui est concerne, et non un element particulier de celui-ci, il convient de s' assurer que le 
conteneur d' implementation du bouton (qui est une grille) est selectionne (article Grid 
situe juste sous Template dans le panneau Objects and Timeline) avant de choisir l'etat 
Pressed dans le panneau Interaction (figure 15-27). 



Figure 15-27 




Un bouton rond et rouge (etiquete State recording is on dans la partie superieure de la 
surface de travail) s'allume alors, indiquant qu'Expression Blend est pret a enregistrer 
des modifications. Reduisez la faille du bouton en deplacant le coin superieur gauche 
puis le coin inferieur droit (afin que le bouton retrecisse mais en gardant son centre fixe). 
Vous pouvez egalement modifier la duree de 1' animation en cliquant et en deplacant la 
souris sur l'indication de duree, sous la barre Pressed. 

Une fois l'operation terminee, cliquez sur le bouton rond et rouge, qui devient gris, main- 
tenant etiquete State recording is off. 
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Expression Blend a cree un nouveau style (BoutonRessort) et la balise du bouton est devenue : 

<Button x:Name="bGo" Content="G0" Width="80" Height="60" 
Style="{StaticResource BoutonRessort}" /> 

Enregistrez le tout (menu File>Save All) et retournez a Visual Studio pour tester le 
nouveau bouton (on pourrait le faire sous Expression Blend mais les programmeurs ne 
s'y sentent pas a l'aise et ne font confiance qu'a Visual Studio. . .). 

II est possible de specifier des animations pour des transitions bien particulieres 
(figure 15-28). 

Figure 15-28 
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Blocs Silverlight dans une page Web 

Une page Web n'est pas necessairement entierement Silverlight. Elle peut en effet etre 
constitute d'elements HTML traditionnels (boutons, textes et zones d'edition, boites de liste, 
etc., mais a la mode HTML, ce qui parait deja tristounet) ainsi que de blocs Silverlight. 
Introduire un ou plusieurs blocs Silverlight dans une page HTML (ou PHP ou ASP.NET) 
permet de l'ameliorer avant, eventuellement, de la reecrire plus tard en application Silverlight. 

Apprenons done a creer une page HTML en incorporant un element Silverlight. Pour 
cela, nous allons creer une nouvelle application Silverlight (appelons-la SLProg) et exami- 
ner ce qui est genere par Visual Studio dans le fichier d'extension .html (fichier SLProg- 
TestPage.html par defaut, dans le repertoire SLProg_Web). Le code suivant correspond a la 
partie body de ce fichier . html : 

<body> 

<!-- Runtime errors from Silverlight will be displayed here. 
This will contain debugging information and should be removed or hidden when 
debugging is completed --> 

<div id='errorl_ocation' style="font-size: small ;color: Gray;"X/div> 
<di v id="si 1 verl i ghtControl Host"> 
<object data="data:application/x-silverl ight," 

type="application/x-silverlight-2-bl" width="100%" height="100%"> 
<param name="source" value="ClientBin/HtmlPlusSL.xap"/> 
<param name="onerror" value="onSilverlightError" /> 
<param name="background" value="white" /> 
<a href="http://go.microsoft.com/fwlink/?LinkID=108182" 
styl e="text-decorati on : none ; "> 
<img src="http : //go. mi crosoft.com/fwl ink/? Li nkld=108181" 

alt="Get Microsoft Silverlight" style="border-style: none"/> 
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</a> 
</object> 

<i frame style=' visibility: hidden ;height:0;width:0;border:Opx'X/iframe> 
</div> 

</body> 

Dans le fichier .aspx (fichier nomme SLProgTestPage.aspx par defaut, dans le repertoire 
SLProg_Web), les choses paraissent plus simples puisque la partie Silverlight se resume a la 
balise asp: Silverlight. La mecanique sous-jacente apparaitra cependant plus clairement 
avec les pages HTML. 

Pour rappel, pour rendre des pages accessibles sur Internet, il faut deployer soit le 
fichier . html , soit le fichier . aspx sur le serveur chez l'hebergeur (sans oublier, dans le cas 
d'un deploiement Silverlight, de creer un sous-repertoire ClientBin et d'y copier egale- 
ment le fichier XAP). La solution ASPX n'est possible que si l'hebergeur supporte les 
hebergements ASP.NET. 

Nous allons tout d'abord modifier le fichier HTML en ajoutant une balise table de trois 
lignes, avec trois cellules en deuxieme ligne. Dans la deuxieme de ces trois cellules 
(balise td), on insere un element Silverlight. II suffit pour cela de deplacer les balises : 

<di v id="sil verl ightControl Host"> 



</div> 

dans cette cellule de grille : 

<body > 



<table width="100%" border="l" > 
<tr> 

<td colspan="3">Premiere ligne</td> 

</tr> 

<tr> 

<td>Ligne 2, colonne K/td> 

<td style="width:400px;height:300px"> 

<div id="sil verl ightControl Host "> 
<object data="data:application/x-sil verl ight, " 

type="application/x-silverlight-2-bl" width="100r height="100%"> 
<param name="source" value="ClientBin/HtmlPlusSL.xap"/> 
<param name="onerror" value="onSilverlightError" /> 
<param name="background" val ue="white" /> 
<a href ="http: //go. mi crosoft.com/fwl ink/? Li nkID=108182" 
style="text-decoration: none;"> 
<img src="http: //go. mi crosoft.com/fwl ink/?LinkId=108181" 

alt="Get Microsoft Silverlight" styl e="border-styl e: none"/> 

</a> 
</object> 

<i frame styl e= ' vi si bi 1 i ty : hi dden ; hei ght : 0 ; wi dth : 0 ; border : Opx ' ></i f rame> 
</div> 
</td> 

<td >Ligne 2. colonne 3</td> 
</tr> 
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<tr> 

<td colspan="3">Troisieme ligne</td> 
</tr> 
</table> 

</body> 

II reste a ecrire (dans Page.xaml) une « application » Silverlight, ici relativement simple 
(texte Silverlight qui tourne en permanence en superposition du logo Silverlight). Cet 
element Silverlight est insere en deuxieme cellule de la deuxieme rangee du tableau : 

<Grid x:Name="LayoutRoot" Background="Beige" > 
<Grid. Triggers) 

<EventTrigger RoutedEvent="TextBl ock. Loaded" > 
<BeginStoryboard > 
<Storyboard> 

<Doubl eAnimation Story boa rd.TargetName="rotSi 1 verl ight" 
Story board. Target Property =" Angl e" 
From="0" To="360" Duration="0:0:10" 
RepeatBehavior=" Forever "/> 

</Storyboard> 
</BeginStoryboard> 
</EventTrigger> 
</Grid.Triggers> 

<Image Source="SilverlightLogo.jpg" /> 
<TextBlock Text="Silverlight" 

FontFamily="Verdana" FontSize="30" Foreground="Red" 
Horizontal Al ignment= "Center" Vertical Alignment=" Center" 
RenderTransform0rigin="0.5, 0.5"> 
<TextBl ock. RenderTransform> 
<RotateTransform x:Name="rotSilverlight" /> 
</TextBlock. RenderTransform> 
</TextBlock> 
</Grid> 

La figure 16-1 illustre le resultat obtenu. 



Figure 16-1 
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Acces aux elements HTML depuis Silverlight 

Depuis quelques annees deja, il est possible d'acceder aux elements HTML et de les manipu- 
ler a partir du JavaScript injecte dans la page. La technique utilisee a cet effet est connue sous 
le nom de DOM (Document Object Model) et est standardised par le comite de standardisa- 
tion W3C. Tous les navigateurs aujourd'hui sur le marche ont adopte ce modele. 

II est possible d'acceder a ces elements HTML et de les manipuler a partir du code 
Silverlight (code ecrit en C# ou VB). Cette technique s'avere plus puissante sans etre 
plus compliquee (grace aux classes .NET) et nettement plus efficace que JavaScript. En 
effet, JavaScript interprete du texte a l'etat brut tandis que le run-time Silverlight opere 
sur du code compile par le compilateur C# ou VB. 

Voyons quelles sont les differentes etapes a realiser pour arriver a ce resultat. 

En tete du programme (dans le fichier nomme par defaut Page.xaml .cs ou Page.xaml .vb), 
vous devez tout d'abord saisir les directives suivantes : 

• using System. Windows. Browser; en C# ; 

• Imports System, windows. Browser en VB. 

Avant de voir comment modifier les elements HTML, presentons Html Page, qui fournit 
essentiellement des informations sur le navigateur et permet de naviguer vers une autre 
page Web (tableau 16-1). 



Tableau 16-1 - Les objets statiques de HtlmPage 



Nom de I'objet 


Description 




Browserlnformation 


Contient des informations sur le navigateur, avec les champs suivants : 




BrowserVersion 


Information specifique au navigateur. 




Name 


Nom du navigateur (par exemple, Microsoft Internet Explorer 
ou Netscape). 




PI atform 


Nom de la plate-forme (par exemple, Win32 si I'utilisateur est sous 
Windows). 




UserAgent 


Contient (parmi d'autres choses) une chaine telle que MS IE ou 
Fi ref ox, ainsi qu'un numero de version. 


Navigate 


Fonction qui permet une redirection sur une autre page du site ou un autre site Web. Par 
exemple : 

Html Page. Na vi gate ( "http: //www. mi crosoft.com" ) ; 



Pour verifier si une chaine contient une autre chaine (par exemple, la chaine MSI E ou Mac, 
il est possible d'ecrire : 

i f (Html Page. Browserlnformation .UserAgent .Con tains ( "MSI E" ) ) .... 

ou : 

int n = HtmPage. Browserlnformation. UserAgent. IndexOf ( "MSIE" ) ; 

ou n est egal a la position de MSIE dans UserAgent ou a -1 si la chaine recherchee n'est pas 
presente. 
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Html Page donne surtout acces a l'objet « document » (de type Html Document), qui est le 
coeur du DOM et qui permet d' acceder aux elements HTML de la page Web : 

Html Document doc = Html Page. Document; 

Voyons maintenant, a travers des exemples pratiques, ce que nous pouvons faire avec 
cette variable doc. 



Modifier les attributs de la page 

En partant de cette variable doc, il est possible de modifier le titre de la page (qui peut etre 
une page Web, une page partiellement Silverlight ou une page entierement Silverlight). 
Pour cela, il faut modifier la balise title dans la section head de la page HTML : 

doc.SetPropertyC'title", "Nouveau titre"); 

Acceder aux elements HTML 

Comme recommande par le comite de normalisation W3C, un element HTML (vu par le 
code Silverlight comme un objet Html Element) est reference comme suit (xyz devant etre 
remplace par la valeur de l'attribut id de 1' element HTML) : 

Html Element el em = doc.GetElementBylDCxyz"); 

Voyons comment acceder a des elements HTML specifiques et comment les manipuler a 
partir du code Silverlight, en utilisant les fonctions GetAttribute, SetAttribute ainsi que 
GetStyleAttribute et SetStyl eAttri bute (pour les attributs de style). 

Pour modifier le libelle d'une balise span ou changer sa couleur de fond et celle d' affichage, 
saisissez le code suivant : 

<span id="zaMsg">Hello</span> 



Html Element elem = docGetElementBylDCzaMsg") ; 
elem.SetAttributet "innerHTML" , "Nouveau" ) ; 
el em. SetStyl eAtt ri bute ( "background" , "green" ) ; 
el em. SetStyl eAtt ri bute ( "col or" , "white" ) ; 

Pour lire et initialiser une zone d'edition HTML (balise input) : 

<input id="zeNom" type="text" /> 



Html Element elem = doc.GetElementBylDC'zeNom") ; 

string s = elem.GetAttribute("value"); // contenu de la zone d'edition dans s 
elem.SetAttributeC'value", "Votre nom ici"); // modification du contenu 

Pour modifier une image (rendue par une balise HTML et non une balise Silverlight) : 

<img id="img" src="Moi . jpg" width="200" height="200" /> 

HtmlElement elem = doc.GetElementBylDC'img") ; 
elem.SetAttributet "src" , "Vous . jpg" ) ; 
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Pour lire le numero d'ordre de 1' article selectionne dans une boite de liste : 

<select id="villes"> 

<option>New York</option> 

<option>Paris</option> 

<option>London</option> 
</select> 



HtmlElement elem = doc.GetElementBylDC'villes"); 
string s = elem.GetAttributeC'selectedlndex"); 

oil s contient, sous la forme d'une chaine de caracteres, le numero d'ordre (0 pour le 
premier) de 1' article selectionne. II reste a convertir s en un entier : 

int n = Int32.Parse(s); 

Pour modifier le libelle d'un bouton : 

<input id="bGo" type="button" value="G0 !" /> 



HtmlElement elem = doc.GetElementBylDC'bGo"); 
elem.SetAttributeC'value", "En avant !"); 

Nous allons maintenant construire dynamiquement un tableau HTML qui sera insere 
dans la premiere cellule de la deuxieme rangee (balise td avec cell RICO comme id) et 
occupera toute la largeur de cette cellule : 

Html Document doc = HtmlPage. Document; 

HtmlElement table = doc.CreateElementC'table") ; 

table. SetAttribute( "width", "100%" ) ; 

tabl e.SetStyl eAttribute( "background- col or" , "Beige" ) ; 

table. SetAttribute( "border" , "1" ) ; 

// creation de la premiere rangee 
HtmlElement liO = doc.CreateEl ement( "tr" ) ; 

HtmlElement colPays = doc.CreateElementC'td"); // creation de la premiere cellule 
col Pays .SetAttributet "innerText" , "Pays"); // initialisation de son contenu 

1 10. AppendChi 1 d(col Pays) ; // accrocher la cellule colPays a la ligne liO 

HtmlElement colPop = doc.CreateElement("td"); // creation de la deuxieme cellule 
col Pop.SetAttribute( "innerText" , "Popul at ion" ) ; 1 iO.AppendChi 1 d ( col Pop) ; 
tabl e. AppendChildd iO) ; // accrocher la ligne 

// creation de la deuxieme rangee 
HtmlElement lil = doc.CreateEl ement( "tr" ) ; 

HtmlElement colFrance = doc.CreateElementCtd"); // creation de la premiere cellule 
col France. SetAttribute( "innerText" , "France" ) ; 1 i 1 . AppendChi 1 d( col France) ; 
HtmlElement colFrancePop = doc.CreateElementC'td"); // creation de la deuxieme cellule 
col FrancePop.SetAttribute( "innerText" , 64.5.ToString( ) ) ; 

1 1 1 . AppendChi 1 d(col FrancePop) ; 
table. AppendChi 1 d ( 1 i 1) ; 
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II creation de la troisieme rangee 
HtmlElement 112 = doc.CreateElementCtr"); 
HtmlElement colltalie = doc.CreateElementC'td") ; 

col Ital ie.SetAttribute( "innerText" , "Ital ie" ) ; 1 i2.AppendChild(col Ital ie) ; 

HtmlElement col Ital i ePop = doc.CreateElementC'td"); 

col Ital iePop.SetAttributet "innerText" , 59.2.ToString( ) ) ; 

li2.AppendChild(col ItaliePop) ; 

table.AppendChild(li2); 

// accroch la table dans la cellule eel 1 RICO 

doc. GetElementBy Id ("cell RICO" ).SetAttribute("innerHTML", 

table.GetAttributeC'outerHTML")); 

La figure 16-2 illustre le resultat obtenu dans le navigateur (le tableau HTML cree dyna- 
miquement apparait en premiere cellule de la deuxieme rangee). 



Figure 16-2 



! Silverlight Project Test Page - Windows Internet Explorer 



\^J\^_J M http://localho';t:SnqS<)/HtmlPlusSI.Wph/HtmlPlusSITp'rtPagehtml 
Fichier Edition Affichage Favoris Outils ? 




P Recherche sui le Web • DEI3 • O e l$l OMunAsk OZoom 




II suffit ensuite de jouer sur les styles (fonction SetStyl eAttribute) pour ameliorer la 
presentation du tableau. 
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Attacher des evenements 

Depuis longtemps, il est possible de traiter en JavaScript des evenements declenches par 
la page Web ecrite en HTML. On peut maintenant faire en sorte que ces evenements 
soient traites par du code C# ou VB. 

Par exemple, pour repondre a un clic de bouton (bouton HTML, evenement onclick) avec 
du code C#, il convient tout d'abord de signaler que le clic sur le bouton HTML va etre 
traite (avec AttachEvent, generalement dans la fonction de Silverlight qui traite l'evene- 
ment Loaded) : 

<input id="bG0" type="button" value="G0 !" /> 



HtmlElement elem = doc.GetElementBylDC'bGo"); 

el em. AttachEvent ( "oncl ick" , new EventHandl er<Html EventArgs>(bGo_onCl ick) ) ; 

II faut ensuite ecrire la fonction C# qui va etre automatiquement appelee lors d'un clic 
sur le bouton HTML : 

private void bGo_onCl icktobject sender, Html EventArgs e) 
{ 



} 

Dans la fonction de traitement, e.SourceElement fait reference a l'element HTML qui est 
a l'origine de l'evenement (ce qui presente de l'interet dans le cas oil une meme fonction 
traite le clic pour plusieurs boutons). 

Autre exemple : pour repondre a un changement de selection dans une boite de liste HTML 
(evenement onchange)et copier 1' article nouvellement selectionne dans la variable sSel , il 
convient d' ecrire : 

<select id="villes"> 

<option value="New York">New York</option> 
<option val ue="Pari s">Paris</option> 
<option val ue=" London ">London</option> 
</select> 



HtmlElement elem = doc.GetElementBylDC'villes"); 
el em. AttachEvent ( "onchange" , 

new EventHandl eKHtml EventArgsX vi 1 1 es_onChange) ) ; 



private void villes_onChange(object sender, Html EventArgs e) 
{ 

HtmlElement elem = e.SourceElement; 
sSel = elem.GetAttributeC'value"); 

} 
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Appeler une fonction JavaScript 

II est possible d' appeler une fonction JavaScript a partir de C# ou VB. Prenons par exemple 
la fonction JavaScript suivante : 

<script type="text/javascript" > 
function f(msg) 
{ 

al ert(msg) ; 

} 

</scri pt> 

Pour appeler la fonction f a partir de code manage (C# ou VB), il faut reclamer un objet 
ScriptObject relatif a f. La fonction JavaScript est alors appelee en executant InvokeSelf 
applique a l'objet ScriptObject : 

ScriptObject jsF = (ScriptObject)Html Page. Window. GetPropertyt "f ) ; 
jsF.InvokeSelfC'Blabla"); 

Une fonction JavaScript retournant une valeur numerique (par exemple, le resultat de 
n'importe quelle operation arithmetique) est supposee retourner une valeur de type Double 
(la notion de type n'est pas aussi precise en JavaScript qu'en C# ou VB). 

Appeler une fonction C# a partir de JavaScript 

II est possible d'appeler une fonction C# a partir du JavaScrip en creant une classe qui 
contiendra les fonctions susceptibles d'etre appelees a partir du JavaScript. Pour cela, 
selectionnez Ajouter>Nouvel element... >Classe dans l'Explorateur de solutions, partie 
Silverlight. Appelons Cal cul la classe ainsi creee, laquelle doit etre marquee Scri ptabl eType 
et les fonctions (ici, une seule) Scri ptabl eMember : 

using System. Windows. Browser; 



[ScriptableType] 
public class Calcul 
{ 

[Scri ptabl eMember] 

public int SommeO'nt a, int b) { return a + b; } 

} 

} 

Dans la fonction qui traite l'evenement Loaded, un objet de cette classe est ensuite cree 
puis enregistre pour JavaScript. Lors de cet enregistrement, on donne un nom (ici Cal cul SL2) 
par lequel le code JavaScript pourra avoir acces a la classe : 

using System. Windows. Browser; 



private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) 

{ 

Calcul calc = new CalculO; 

Html Page. Regi sterScri ptabl eObject( "Cal cul SL2" , calc); 

} 
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Passons au fichier HTML et inserons (dans la balise body) deux zones d'edition ainsi qu'un 
bouton. La fonction JavaScript qui traite l'evenement oncl i ck sur le bouton appellera la fonc- 
tion Cal cul avec, en arguments, les valeurs numeriques lues dans les deux zones d'edition : 

<body> 

Nl : <input type="text" id="zel" /> <br /Xbr /> 
N2 : <input type="text" id="ze2" /> <br /Xbr /> 
<input type="button" id="bSomme" val ue="Somme" 
onclick="CalculSomme()" /> 

Nous donnons un nom (ici SL2) a la balise object qui permet de telecharger le code lie a 
l'application Silverlight (ici, essentiellement le code de la classe Cal cul ) : 

<object id="SL2" d 

II nous reste a ecrire le code JavaScript qui appelle la fonction C# (le 1* dans les deux 
premieres lignes de la fonction sert a transformer la chaine de caracteres en un format 
numerique) : 

<script type="text/javascript" > 
function Cal cul Somme( ) 
{ 

var Nl = l*document.getElementById("zel"). value; 
var N2 = l*document.getElementById("ze2"). value; 
var objSL2 = document .getEl ementByldt "SL2" ) .content ; 
var res = objSL2.CalculSL2.Somme(Nl, N2); 
alert(res) ; 

} 

</script> 

Etant donne que le fichier HTML a ete modifie, c'est celui-ci qu'il faut faire executer. 
Pour cela, effectuez un clic droit sur le nom du fichier HTML dans l'Explorateur de solu- 
tions (partie Web) et selectionnez Afficher dans le navigateur ou Naviguer avec. II est 
egalement possible de definir la page HTML comme page de demarrage. 

Si on donne la valeur 0 aux attributs Width et Height du UserControl dans Page.xaml, rien 
n'indique a l'utilisateur que les operations sont en fait effectuees par du code C# compile. 

Animation Flash dans une page Silverlight 

Les animations Flash ont le merite d'exister depuis plusieurs annees et d'etre tres repandues. 
Nous allons voir ici comment inserer une animation Flash dans une cellule de grille. Pour cet 
exemple, l'animation Flash a pour nom FeuArti f i ce . swf et sa faille est de 400 x 300 pixels. 

II fautd'abord ajouter une ligne (avec l'attribut isWindowless a true) dans la balise object 
(ici, dans le fichier HTML) : 

<object data="data:appl ication/x-sil verlight, " 

type="application/x-silverlight-2-b2" width="100r hei ght="100%"> 

<param name="isWindowless" value="true" /> 



</object> 
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Nous desirons que le composant Flash apparaisse dans la cellule en deuxieme colonne de 
la deuxieme rangee de la grille. II convient done de l'inserer en superposition d'un canevas 
(de la taille de 1' animation Flash) occupant cette cellule : 

<Grid x:Name="l_ayoutRoot" Background="Yel 1 ow" Loaded="LayoutRoot_Loaded" > 
<Grid.RowDefinitions> 
<RowDefinition/XRowDefinition Height="300"/XRowDefinition/> 
</Grid.RowDefinitions> 
<Grid.ColumnDefinitions> 

<ColumnDefinition/><ColumnDefinition Width="400"/XCol umnDefinition/> 
</Grid.Col umnDefinitions> 



<Canvas x:Name="can" Width="400" Height="300" Grid.Row="l" Grid. Col umn="l" /> 



</Grid> 

Dans le fichier HTML, il faut ensuite ajouter la balise du composant Flash, laquelle depend 
du navigateur. Ceux qui utilisent Flash ont recours a divers trues et astuces pour resoudre 
ce probleme mais ce n'est pas le propos de cet ouvrage. 

Pour Internet Explorer, la balise est : 

<object classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000" 
width="400" height="300"> 
<param name="movie" val ue="FeuArtifice.swf " /> 
</object> 

Pour Firefox, elle s'ecrit : 

<object type="appl ication/x-shockwave-flash" data="FeuArtifice.swf " 
width="400" height="300"/> 

Cette balise est inseree dans une balise di v : 

<div id="flash" style="position:absolute; z-index:2; width:400px; height:300px; 
left:10px; top:10px"> 



</div> 

On pourrait s'arreter la si le composant Flash devait toujours etre affiche a partir du point 
(10, 10) dans la grille. Mais dans la mesure oil il doit se superposer a une cellule de la 
grille, dont la position depend de la taille de la fenetre du navigateur, il faut etre capable 
de repositionner le composant Flash quand cette fenetre change de taille. 

Pour cela, nous traitons l'evenement SizeChanged adresse a la grille (il faut done aussi 
traiter l'evenement Loaded) : 

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e) 

{ 

LayoutRoot. SizeChanged += new SizeChangedEventHandler(LayoutRoot_SizeChanged) ; 

} 
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Dans cette fonction LayoutRoot_SizeChanged, il faut ensuite determiner la position du 
canevas can et repositionner le composant Flash en utilisant les fonctions etudiees au 
debut de ce chapitre : 

GeneralTransform gt = can.TransformToVisual (LayoutRoot) ; 
Point offset = gt.Transform(new Point(0, 0)); 
int X = (int)offset.X; 
int Y = (int)offset.Y; 
Html Document doc = Html Page. Document; 
HtmlElement elem = doc.GetElementByldC'flash") ; 
elem.SetStyleAttribute("left", X + "px"); 
el em.SetStyleAttribute( "top" , Y + "px"); 

Executez 1' application Silverlight en effectuant un clic droit sur le fichier HTML dans 
l'Explorateur de solutions (partie Web) et en selectionnant Naviguer avec, ou directement 
a partir de l'explorateur de fichiers. 



Annexe 



C#, VB et Visual Studio pour 
le developpement Silverlight 2 



Les applications Silverlight 2 peuvent etre programmees en C# ou VB.NET, les deux 
principaux langages de l'environnement .NET de Microsoft. On retrouve ces deux langages, 
avec les memes outils et quasiment les memes classes, pour le developpement d' applica- 
tions Windows ou ASP.NET (programmation Web cote serveur). Les applications Silver- 
light 2 peuvent aussi etre programmees en IronPython et IronRuby mais la communaute 
des developpeurs Silverlight en ces deux langages est sans commune mesure avec celle 
des developpeurs en C# et VB. 

VB et surtout C# ont la reputation d'etre des langages complexes, difficiles a maitriser et 
par consequent reserves a une pretendue « elite ». Me me si certains ne negligent pas 
leurs efforts pour entretenir cette legende, ecrire en C# ou en VB des applications Silver- 
light d'un niveau acceptable est a la portee d'un bien plus grand nombre qu'on ne le 
pense. II n'est en effet pas necessaire de maitriser les techniques avancees de ces langa- 
ges pour atteindre un niveau acceptable. Toutefois, ceci ne signifie pas qu'il s'agit de 
langages faciles ne reclamant aucun effort d'apprentissage. La recompense est cependant 
grande, tant les perspectives sont enormes pour ceux qui feraient le petit effort eventuel- 
lement necessaire pour se former a C# ou VB. 

C# et VB sont des langages dits types et orientes objet, largement utilises en milieu 
professionnel. C#, comme Java d'ailleurs, a beaucoup pris au C++, done aussi au C mais 
en visant la facilite d'utilisation (source d'efficacite) et en eliminant les constructions 
dangereuses et inutilement compliquees du C et du C++ (par exemple, les pointeurs ne 
sont plus utilises que dans des cas bien particuliers d'optimisation). Visual Studio y est 
pour beaucoup dans cette facilite, grace notamment a son aide contextuelle. 
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II serait regrettable que certains passent a cote d'un outil puissant et convivial au service 
du developpement d' applications Web novatrices et spectaculaires par crainte injustifiee 
de ces outils. Se mettre au C# ou a VB, tout en restant raisonnable dans ses ambitions, au 
moins au debut, est a la portee de ceux qui ont quelque peu pratique un langage, quel 
qu'il soit. 

Cette annexe a pour seul but de vous mettre, si necessaire, le pied a l'etrier mais ne 
remplace en rien un ouvrage complet consacre a C# ou VB (les ouvrages de formation a 
C# et VB dans le cadre de la programmation Windows peuvent tres bien convenir). Nous 
esperons done que vous poursuivrez, si necessaire, cette etude en consultant des ouvrages 
specialises. 

C# et VB offrent les memes possibilites et opter pour l'un ou l'autre de ces deux langages 
releve d'un choix personnel. A noter toutefois que la majorite des articles (et sur Silver- 
light 2 en particulier) sont aujourd'hui ecrits en C#. 

C# et VB sont des langages types. Cela veut tout simplement dire que les variables utili- 
sees doivent avoir ete declarees au moment d'ecrire le programme, avec un nom et un 
type. Autrement dit, en declarant une variable, on indique le genre de donnees (entier, 
valeur decimale, chaine de caracteres, etc.) que celle-ci va contenir. Au premier abord, 
cela peut paraitre contraignant par rapport a des langages qui n'imposent ni de predeclarer 
les variables ni de leur assigner un type bien precis. Dans la pratique cependant, on se 
felicite que VB soit maintenant devenu aussi type que C#. Cela impose une rigueur bien 
necessaire dans l'ecriture d'un programme et permet au compilateur de detecter des 
problemes (assures ou potentiels) mais aussi de generer un code plus efficace, en evitant 
d'incessantes determinations de type et conversions en cours d'execution de programme. 

C# et VB sont orientes objet, ce qui signifie qu'on travaille avec des boites noires, appelees 
classes. L'utilisateur d'une telle boite noire (un programmeur) doit uniquement en connaitre 
l'interface, e'est-a-dire ses fonctionnalites et la maniere de l'utiliser. Le fonctionnement 
interne de cette boite noire est du ressort de son concepteur (un autre programmeur ou le 
meme). Le fonctionnement interne peut ainsi etre modifie (par exemple, en vue d'une 
optimisation) sans repercussion sur l'interface, done sans modification des programmes 
qui utilisent cette classe. Neanmoins, une recompilation s'avere souvent necessaire. 

Une classe regroupe des fonctions et des variables qui ont un lien entre elles. Certaines de 
ces fonctions et de ces variables sont dites publiques et font des lors partie de l'interface : 
elles peuvent etre utilisees par ceux qui integrent la classe dans leurs programmes. 
D'autres sont privees et liees au fonctionnement interne de la classe (son implementation) : 
elles ne peuvent done etre utilisees que dans le cadre de la modification de cette classe. 

Partons a la decouverte, certes en survol, de ces deux langages, en se limitant a ce qui est 
vraiment essentiel pour ecrire des applications Silverlight 2. 

Voyons tout d' abord comment inserer des commentaires. En C#, plusieurs lignes peuvent 
etre mises en commentaires avec /* et */ qui permettent de delimiter la zone de commen- 
taires. Les caracteres // (en C#) et ' (en VB) permettent d'indiquer que e'est le reste de 
la ligne qui est en commentaire. En C#, cela donne done : 
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I // ceci est un commentai re sur une ligne 
/* une ou plusieurs lignes 
de commentai res */ 

et en VB : 

' ceci est un commentai re 

C# fait une distinction entre majuscules et minuscules et il importe done d'etre attentif a 
la casse (ainsi, n et N constituent des variables differentes). VB ne fait pas cette distinction 
mais Visual Studio corrigera automatiquement votre code si necessaire. Par exemple, si 
une variable a ete declaree avec comme nom za, vous pouvez saisir ZA, zA ou Za dans le 
code, Visual Studio le corrigera en forcant la casse d'origine. 

En VB, on ecrit une instruction par ligne. Si, generalement pour des questions de presen- 
tation, la fin d'une instruction doit se poursuivre a la ligne suivante, il faut terminer la 
premiere ligne par le caractere de soulignement (_). Deux ou plusieurs instructions 
peuvent neanmoins etre ecrites sur une meme ligne a condition de les separer par le 
caractere : (deux-points). 

C# et VB operent sur des donnees (contenu des variables) qui ont la meme representation 
en memoire, ce qui assure Finteroperabilite entre ces langages. Voyons quels sont ces 
types de donnees. 

• Une variable de type bool peut contenir une valeur booleenne : true ou fal se, corres- 
pondant a vrai ou faux. 

• Une variable de type byte est codee sur 8 bits et peut contenir un caractere compris 
dans les 255 du code ANSI. C# et VB travaillent naturellement avec des lettres codees 
sur 16 bits (type char). 

• Les variables de type short, int et long peuvent contenir des valeurs entieres et sont 
codees respectivement sur 16, 32 et 64 bits, ce qui determine les valeurs limites dans 
une variable de l'un de ces types. 

• Une variable de type char peut contenir une lettre (ou un chiffre ou encore un signe de 
ponctuation) codee sur 16 bits, done conforme a la norme Unicode qui tient compte 
des alphabets autres que celui en usage en Occident. Une chaine de caracteres consiste 
en une succession de variables de type char. Contrairement a ce que doivent encore 
faire les programmeurs en C, il est inutile de se preoccuper (avec les zeros de fin de 
chaine) de la maniere dont la chaine est codee en memoire. Une chaine de caracteres 
est de type string et le reste releve de la cuisine interne, cachee dans 1' implementation 
de la classe String correspondant au type string. 

• Les variables de type f 1 oat et doubl e contiennent des valeurs decimales et sont codees 
respectivement sur 32 et 64 bits. Silverlight privilegie le type doubl e, qui donne plus de 
precision dans la representation en memoire du nombre decimal (etant donne la 
maniere de coder les nombres, une valeur comme 0.1 n'est qu'approchee, certes tres 
approchee mais approchee quand meme et plus approchee en format double qu'en 
format float). 
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Le tableau A-l presente la correspondance des types entre C# et VB (il existe egalement 
d'autres types mais ceux mentionnes ici couvrent la majorite des besoins). 

Tableau A-1 - Correspondance des types de donnees 
entre C# et VB 



c# 


VB 


bool 


Bool ean 


byte 


Byte 


char 


Char 


short 


Short 


int 


Integer 


long 


Long 


float 


Single 


doubl e 


Doubl e 


string 


String 



Une variable doit etre declaree et son type specifie des la phase de developpement du 
programme. Le compilateur (qui traduit les instructions C# ou VB en code binaire) sanc- 
tionne toute utilisation d'une valeur d'un autre type dans une variable, sauf s'il y a 
compatibilite sans perte de precision (par exemple, l'entier 5 peut etre converti sans 
probleme en 5.0, c'est-a-dire en une variable de type double). 

Une variable de type stri ng ne pourra jamais contenir une valeur decimale. Mais il existe 
des mecanismes permettant de convertir le contenu d'une variable en une autre, d'un 
autre type. Ainsi, "12" designe la chaine de caracteres formee des lettres 1 et 2, mais 12 
represente la valeur numerique (entiere) douze. Cela peut paraitre equivalent aux yeux de 
beaucoup (et me me dans certains langages) mais "12" et 12 sont represented de maniere 
tres differente par les ordinate urs. 

Passons aux declarations de variables. Les lettres accentuees sont acceptees dans le nom des 
variables. Notez la difference dans la maniere de specifier la valeur d'un char (tableau A-2). 

Tableau A-2 - Declaration de variable et eventuelle initialisation 

en C# et VB 



c# 


VB 


int N; 


Dim N as Integer 


double a, b; 


Dim a. b As Double 


bool bOK = true; 


Dim bOK As Boolean = True 


string sNom = "Moi " ; 


Dim sNom As String = "Moi" 


char cLettre = 'A' ; 


Dim cLettre As Char = "A"c 


int Annee = 1789; 


Dim Annee As Integer = 1789 


double pi = 3.14159; 


Dim pi As Double = 3.14159 
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Les operations arithmetiques et logiques (ET et OU) sont effectuees a l'aide d'operateurs 
communs a la plupart des langages. A noter toutefois que : 

• « egal » s'ecrit == en C# et = en VB ; 

• « different » s'ecrit ! = en C# et <> en VB. 

En C#, le caractere / permet d'effectuer une division (comme en VB) mais il s'agit d'une 
division entiere si les deux operandes sont des entiers tandis que VB effectue une division 
reelle (voir les exemples suivants). Le reste d'une division est donne par le caractere % en 
C# et Mod en VB. Le tableau A-3 presente les differents operateurs utilises en C# et VB. 

Tableau A-3 - Les differents operateurs utilises en C# et VB 



c# 


VB 










==<><= >= != 




< 


> 


<= 


>= <> 


+ - * / 


+ 






/ 




% 


Mod 










+- - *- 1- 




+= 




*= 




++ 

&& || 


++ 

And 




Or 






int a=7, b=2, c; 


Dim 


a As 


Integer=7 , 


b As 


[nteger=2 ,_ 






c As 


Integer 






double d, e; 


Dim 


d As 


Doubl e 






c = a / b; lie contient 3 


c = 


a / t 


) ' c cont 


ient 4 




d = a/b; // d contient 3.0 


d = 


a / t 


) ' d cont 


ient 3 


.5 


e = (double)a / b; lie contient 3.5 












a += 3; // a passe a 10 


a += 


= 3 


a passe a 


10 




a++; // a passe a 11 


a += 


= 1 


a passe a 


11 




c prend la valeur 3 car la division entiere est effectuee, c vaut 4 a cause de I'arrondi (superieur a partir de . 5). 

avec perte de la partie decimale. 

d vaut 3 . 0 pour la meme raison. 

e vaut 3.5 car une division reelle a ete forcee par le 

mecanisme du transtypage (casting en anglais). 
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Les exemples suivants (tableau A-4) illustrent la maniere d'ecrire les alternatives. 
Tableau A-4 - Ecriture d'alternatives en C# et VB 



VB 

If a > 10 Then b 




if (a > 10) b 




Une seule instruction a executer quand la condition est vraie, a et b doivent avoir ete declarees au prealable. En C#, 
les parentheses sont necessaires autour de la condition. 

if (a > 10) b = 0; If a > 10 Then 

else b = 1; b = 0 

Else 

b = 1 
End If 

Une seule instruction a executer dans les deux cas (condition vraie et condition fausse). Les accolades sont faculta- 
tives en C# quand une branche d'alternative ne contient qu'une seule instruction. 



if (a > 10) 

{ 



If a > 10 Then 
End If 



Plusieurs instructions a executer quand la condition est vraie et aucune quand la condition est fausse. Les accolades 

sont necessaires en C# remplace une ou plusieurs instructions (une instruction par ligne en VB, a moins de 

les separer par le caractere :) En C#, une instruction se termine toujours par le caractere ; (point-virgule). 



f (a > 10) 



If a > 10 Then 



Ise 



Else 
End If 



Plusieurs instructions a executer quand la condition est vraie et plusieurs dans le cas « sinon ». 

switch (n) Select Case n 

{ 



case 0 : 
case 1 : 
defaul t 

} 



Case 0 

b = 10; break; b = 10 

b = 100; break; Case 1 

b = 1000; b = 100 

Case Else 
B = 1000 
End Select 

Instruction « selon que ». Si n vaut 0, b prend la valeur 10 et le programme sort du switch. Si n vaut 1, b prend la 
valeur 100 et on sort du switch. Dans tous les autres cas, b prend la valeur 1000. n et b doivent avoir ete declarees 
au prealable. 
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Passons maintenant aux boucles (tableau A-5). 



Tableau A-5 - Exemples de boucles en C# et VB 




for (int i=0; i<10; i++) For i As Integer = 0 To 9 

{ 



Next 1 

} 

La variable i n'existe qu'a I'interieur de la boucle for, pour controler I'avancement de celle-ci. i est d'abord initialisee 
a 0, puis increment.ee (par 1++) a la suite de chaque passage dans la boucle. La condition est ensuite evaluee et le 
processus se repete tant que la condition est vraie (deuxieme clause du for en C#, sans parenthese dans ce cas 
autourde la condition). 

while (n < 10) 

{ 



} 

Boucle « tant que ». n doit avoir ete declaree et initialisee avant I'entree dans la boucle whi 1 e. Le programme exe- 
cute les instructions du whi 1 e (Do Whi 1 e en VB) si la condition est vraie. II vous appartientde modifier n dans le corps 
de la boucle pour modifier la condition. Quand I'execution tombe sur I'accolade de fin (sur Loop en VB), il y a retour 
au whi 1 e/Do Whi 1 e, avec examen de la condition. Si le corps de la boucle ne contient qu'une seule instruction, les 
accolades sont facultatives en C#, mais les parentheses sont necessaires autour de la condition. 

do Do_ 

{ 

Loop While n < 10 

} while (n < 10); 

Boucle « faire tant que ». La condition est examinee a la fin d'un passage dans la boucle dont les instructions sont 
done toujours executees au moins une fois. Si le corps de la boucle ne contient qu'une seule instruction, les accola- 
des sont facultatives en C#, mais les parentheses sont necessaires autour de la condition. 

foreach (int n in tab) For Each n As Integer In tab 

f 

Next i 

} 

Balayage du tableau tab d'entiers. n passe successivement (lors de chaque passage dans la boucle) par chacune 
des valeurs du tableau tab. 



Do While n < 10 



Loop 
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Voyons maintenant comment declarer et initialiser des tableaux dans les deux langages 
(tableau A-6). Notez l'utilisation des crochets en C# et des parentheses en VB. 



Tableau A-6 - Declaration et initialisation de tableaux en C# et VB 



c# 


VB 


int[] tab; 


Dim tab( ) As Integer 


tab = new i n t [ 5 ] ; 


tab = New Integer(4) { } 


tab[0] = 10; 


tab(0) = 10 



La premiere ligne, quel que soit le langage, est une declaration de tableau : on signale au compilateur qu'on va uti- 
liser un tableau d'entiers. A ce stade, la taille du tableau n'est pas encore specifiee. Celui-ci est veritablement cree 
a la deuxieme ligne (de la memoire est reservee a ce moment pour accueillir les cinq valeurs entieres du tableau, 
operation appelee instanciation). La premiere cellule du tableau prend alors la valeur 10. Lindice d'acces aux cellules 
du tableau commence a 0 et s'etend jusqu'a 4. 

int[] tab = {1. 2, 3}; Dim tab() As Integer = {1, 2, 3} 

On declare et initialise un tableau de trois entiers. Le compilateur se base sur le nombre de valeurs d'initialisation 
pour determiner la taille du tableau. 

string nom = "Moi"; Dim nom As String = "Moi" 

Declaration et initialisation d'une chame de caracteres. 

int[3, 2] t = {{10, 11} 
{20, 21} 
(30, 31} 

} 

Declaration et initialisation d'un tableau de trois lignes, chacune comportant deux colonnes. Lacces a la cellule situee 
dans la seconde colonne de la premiere ligne se fait par t[0, 1] en C#ett(0, 1) en VB. 



Dim t(3, 2) As Integer = _ 

{{10, 11}, {20, 21}, {30, 31} } 



La tableau A-7 montre des exemples d'operations effectuees sur des chaines de caracteres. 



Tableau A-7 - Exemples d'operations effectuees 
sur des chaines de caracteres en C# et VB 



c# 


VB 


stri ng s = "Hel 1 o" ; 


Dim s As String = "Hello" 


s += " Silverlight"; 


s &= " Silverlight" 


s = s.SubStringd, 6); 


s = s.SubStringd, 6) 


s = s.Insertd, '1 ' ) ; 


s = s . Insertd , "1 "c) 


n = s. Length; 


n = s. Length 


s estd'abord initialised a "Hello". 

On lui ajoute ensuite (concatenation) une autre chaine (s contient maintenant "Hel 1 o Sil verl ight"). 

s . SubStri ng ne modifie pas la chame sur laquelle porte I'operation mais renvoie une chaine de 6 caracteres a partir 

du deuxieme. s contient done "el 1 o S". 

On insere i en deuxieme position, s devient done "ei 1 1 o S". 

Enfin, n prend la valeur 7 (nombre de caracteres dans s). 
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Voyons maintenant comment ecrire et appeller des fonctions (tableau A-8). 



Tableau A-8 - Declaration et appel de fonctions en C# et VB 



c# 


VB 


void f() { } 


Private Sub f() 


f(); // appel de f 


End Sub 

f ( ) ' appel de f 


f est une fonction qui ne regoit aucun argument et ne renvoie aucune valeur. 

La presentation etant libre en C#, elle est souvent adaptee a des styles personnels ou imposes par I'entreprise (posi- 
tion des accolades, retraits, etc.). 


double fO'nt a, int b) 

{ 

return (double)a / b; 

} 


Function f(ByVal a As Integer, _ 
ByVal b As Integer) As Double 
Return a / b 
End Function 


int y = 2; 

double x = f (7, y) ; 


Dim y As Integer = 2 

Dim x As Double = f(7, y) 


f est une fonction qui regoit deux arguments de type entier par valeur : I'argument a prend la valeur 7 et I'argument b 
la valeur 2.Toute modification de b dans la fonction n'a aucune repercussion sur y. f renvoie une valeur de type dou- 
ble (ici, 3.5). 


void g() 

{ 

int a=5; 
f(ref a); 

// a vaut 10 


Private Sub g( ) 
Dim a As Integer=5 
fCa) 

'a vaut 10 

End Sub 


1 

void f(ref int x) 
{ 

x = 10; 

[} 


Private Sub ftByRef x As Integer) 
x = 10 
End Sub 


II y a ici passage d'argument par reference : I'argument x de f se confond avec la variable (ici, a) passee en argument. 
Toute modification de x dans f modifie done a de g. 
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C# et VB peuvent intercepter des erreurs dans un programme (division par zero, acces a 
un tableau en dehors de ses bornes, etc.), ce qui evite un « plantage », souvent catastro- 
phique. Pour cela, on lance l'execution des instructions qui se trouvent dans la clause try. 
En cas de probleme, le programme quitte immediatement le bloc try (sans executer les 
instructions qui suivent dans ce bloc) et rentre dans la clause catch. On dit que l'erreur a 
ete interceptee. Le tableau A-9 presente un exemple d' exceptions. 



Tableau A-9 - Exemple d'exceptions en C# et VB 





VB 


try 

{ 

) 

catch (Exception exc) 
{ 


Try 


Catch exc As Exception 

' msg d'erreur dans exc. Message 

End Try 


// msg d'erreur dans exc. Message; 

} 





Les classes jouent un role fondamental dans les langages orientes objet. Une classe 
regroupe des fonctions ainsi que des variables en relation avec ces fonctions (tableau A- 10). 



Tableau A-10 - Exemples de classes en C# et VB 



c# 


VB 




class Pers 


Class Pers 




{ 


Private mNom, mPrenom As String 




string mNom, mPrenom; // champs prives 


Public Sub New(ByVal aNom As String, _ 


public Pers(string aNom, string aPrenom) 


ByVal aPrenom As 


String) 


// constructeur 


mNom = aNom 




{ 


mPrenom = aPrenom 




mNom = aNom; // initialisation des champs 


End Sub 




prives 






mPrenom = aPrenom; 


Public Function NomCompletO As 


String 


) 


Return mPrenom & " " & mNom 




public string NomCompletO // fonction 


End Function 




publ ique 
{ 


End Class 




return mPrenom + " " + mNom; 
} 






Inserez la classe Pers dans Page.xami .cs, au- 


Inserez la classe avant la ligne Class Page dans 


dessus de la ligne ci ass Page. 


Page.xami .cs 




Pers p = new Perst "Chapl in" , "Charlie"); 
s = p.NomCompl et( ) ; // s contient Charlie 
Chapl i n 


Private p As New Perst "Chapl in" , 
s = p.NomCompl et( ) ' s contient 
Chapl i n 


"Charl ie" ) 

Charl ie 
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Une classe peut contenir des proprietes. Une propriete ressemble a un champ public (et 
s'utilise aussi facilement) mais son utilisation implique l'execution d' instructions : celles 
mentionnees dans la clause get pour la lecture de la propriete et celles mentionnees dans 
la clause set pour une modification. Le tableau A-l 1 presente des exemples de proprietes. 



Tableau A-1 1 - Exemples de proprietes en C# et VB 



Off 


VD 






class Pers 


Class Pers 


{ 


Private mNom As String 


string mNom; 


Private mAge As Integer 


int mAge; 


Public Sub New(ByVal aNom As String, ByVal 


public Perststring aNom, int aAge) 


aAge As Integer) 


{ 


mNom = aNom 


mNom = aNom; mAge = aAge; 


mAge = aAge 


} 


End Sub 


public string NomAge 


Public Property NomAgeO As String 


{ 


Get 


get 


If mAge>40 Then 


{ 


Return mNom 


if (mAge>40) return mNom; 


1 1 se 


else return mNom + " (" + mAge + ")"; 


Return mNom & " (" & mAge + ")" 


} 


End If 


} 


End Get 


) 


SettByVal value As String) 




End Set 




End Property 




End Class 


Nous avons introduit ici la propriete NomAge. Pour obte- 


II n'y a pas de clause set mais Set/End Set doit etre 


nir NomAge d'une personne, le programme execute les 


present. 


instructions de la clause get. II n'y a pas de clause set 




ici, on ne peut done pas ecrire p. NomAge = ...; 




Pers p = new PersCElle" , 30); 


Dim p As Pers 


s = p. NomAge; // s contient El 1 e (30) 


p = New PersCElle", 50) 




s = p. NomAge ' s contient Elle 



Pour apprendre un langage, rien ne vaut la pratique. Creons un projet Silverlight tres 
simple. Pour cela, selectionnez le menu Fichier>Nouveau>Projet, choisissez le langage 
souhaite, puis le menu Application Silverlight (figure A-l). Specifiez le nom du reper- 
toire dans lequel 1' application sera creee (zone d' edition Emplacement) et attribuez un 
nom au projet. 

Un projet regroupe tous les fichiers necessaires a une application. Une solution regroupe 
un ou plusieurs projets. 
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Figure A-1 
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Pour un simple programme de familiarisation avec un langage, selectionnez la plus simple 
des solutions, e'est-a-dire la creation d'une page de test (figure A-2). 



Figure A-2 
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C#, VB et Visual Studio pour le developpement Silverlight 2 

Annexe 

La presentation de la page est decrite en XAML, dans le fichier Page.xaml. Double - 
cliquez sur ce fichier dans l'Explorateur de solutions pour l'editer (figure A-3). 



Figure A-3 
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On peut inserer dans la page un grand nombre de composants (figures A-4 et A-5) mais 
pour un apprentissage, nous nous contenterons ici d'une zone d'affichage (TextBlock), 
d'une zone d'edition (TextBox) et d'un bouton (Button). 



Figure A-4 
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Visual Studio est constitue de plusieurs fenetres retractables et deplacables. Une fenetre 
retractable reagit au survol de la souris et sort de son encoche. Une fenetre est retractable 
si la punaise est en position horizontale (cliquez dessus pour inverser la position, 
figure A-6). 



Figure A-6 
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Vous pouvez deplacer une fenetre (non automatiquement retractable) en cliquant sur sa 
barre de titre et en la deplacant, bouton de la souris enfonce. 
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Lors du emplacement de la fenetre, Visual Studio affiche des zones d'ancrage privilegiees 
(figure A-7). Si vous faites glisser la fenetre sur une telle zone, elle sera accolee au bord 
et pourra devenir automatiquement retractable (en fonction de la position de la punaise). 



Figure A-7 
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de losange pour chotsir un emplacement d'ancrage. Pour empecher l ancrage. maintenez enfoncee la touche CTRL 



Pour ecrire de petits programmes d'apprentissage, editez le fichier Page.xaml et inserez 
les trois composants suivants : 

<UserControl x: CI ass="Testl .Page" 

xmlns=" http://schemas.mi crosoft.com/winfx/2006/xaml /presentation" 
xml ns :x="http: / /schema s .microsoft.com/winfx/2006/xainl " 

> 

<Gri d x:Name="LayoutRoot" Background="White"> 
<TextBlock x:Name="za" Text="???" /> 
<TextBox x:Name="ze" Width="150" Height="20" 

HorizontalAlignment= "Left" Vertical Al ignment="Top" 
Margin="10, 50" /> 
<Button x:Name="bTest" Content="Test" Width="60" Height="40" 
Horizontal Al ignment= "Left" VerticalAl ignment="Top" 
Margin="10, 100" Click="bTest_Click" /> 

</Grid> 
</UserControl> 
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Si vous travaillez en C#, inserez la fonction suivante dans Page.xaml .cs (apres le construc- 
teur de Page) : 

private void bTest_Click(object sender, RoutedEventArgs e) 
{ 

} 

Si vous travaillez en VB, inserez la fonction suivante dans Page . xaml . vb (apres le construc- 
ted New) : 

Private Sub bTest_Click(ByVal sender As System. Object, _ 

ByVal e As System. Windows. RoutedEventArgs) 

End Sub 

La figure A-8 presente le resultat obtenu dans le navigateur. 



Figure A-8 
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Inserez ensuite vos instructions dans la fonction bTest_Cl i ck. Par exemple : 



c# 


za .Text 


= "11 est " - 


H DateTi'me.Now.ToLongTimeString( ) ; 


za .Text 


= "Vous avez 


tape " + ze.Text; 


int N = 


20; 




za .Text 


= "Le double 


de " + N + " est " + 2*N; 



try 



int n = Int32.Parse(ze.Text) ; // conversion de la chaine de caracteres en un entier 
za.Text = "Le double de " + n + " est " + 2 * n; 

} 

catch (Exception exc) 
{ 

za.Text = "Tapez un nombre, svp"; 

} 

VB 

za.Text = "II est " & DateTime.Now.ToLongTimeString( ) 
za.Text = "Vous avez tape " & ze.Text; 



Try 

Dim n As Integer = Integer. Parse(ze. Text) ' conversion de la chaine de caracteres en un 
entier 

za.Text = "Le double de " & n & " est " & 2 * n 
Catch exc As Exception 

za.Text = "Tapez un nombre, svp" 
End Try 



Pour deboguer un programme, cliquez simplement a gauche de l'instruction pour placer 
un point d' arret, puis executez-le en appuyant sur la touche F5 (ou en cliquant sur le petit 
triangle vert dans la barre des boutons). Le programme s'arretera a cette instruction 
(figure A-9). 



Figure A-9 



i 



private void bTest_Click (object sender, RoutedEventArgs e) 
{ 

try 
{ 

int n = Int32 . Parse (ze .Text) ; 



- "Le double de 



catch (Exception exc) 
{ 

za.Text = "Tapez un nombre, svp" 

} 
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Vous pouvez alors visualiser le contenu des variables (il suffit d'immobiliser la souris sur 
le nom de la variable, figure A- 10) : 

Figure A-10 



int |S=5; 

H priva ^ N l 5 | id bTest_Click (object sender, RoutedEventArgs e) 

{ 

|za.Text = "Clic sur bouton a " + DateTime .Now. ToLongTimeString ( ) , 

} 



II est egalement possible de modifier le contenu des variables et de continuer l'execution 
du programme (jusqu'a la fin ou jusqu'au prochain point d' arret, figure A- 11). 

Figure A-11 
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Creer des applications Web plus dynamiques 

S'executant sur differentes plates-formes (Windows, Mac et bientot Linux) et compatible avec les navigateurs les 
plus repandus (Internet Explorer, Firefox, Safari), Silverlight est une nouvelle technonologie de Microsoft qui permet 
de developper des applications Internet riches, pouvant etre deployees sur n'importe quel serveur, sans necessiter 
de composants specifiques ni de droits particuliers. Avec la version 2, il devient possible de concevoir des sites 
Web aussi conviviaux que des applications Windows, dotes d'une grande interactivite et d'effets visuels spectacu- 
laires, notamment grace aux techniques d'animation et a la technologie Deep Zoom. 

Redige par I'un des specialistes de Silverlight, cet ouvrage explique de maniere pratique comment ecrire ces applica- 
tions Web d'un nouveau type en C# ou en Visual Basic, sachant que peu de connaissances sont requises, Visual Studio 
et I'outil graphique Expression Blend facilitant amplement la tache du developpeur. Le livre met I'accent sur la program- 
mation des animations et Integration de medias (son, videos, etc.), mais egalement sur I'acces aux donnees via des 
services Web. Le code source des exemples du livre en C# et Visual Basic est disponible sur www.editions-eyrolles.com. 



Au sommaire 

Installation de Silverlight • Creation d'une application Silverlight • Conteneurs de base et specifiques • Couleurs 
et pinceaux • Masque d'opacite • Pinceaux dans Expression Blend • Degrades • Premiere serie de composants 

• Rectangles et ellipses • Zones d'affichage (TextBlock) • Polices de caracteres • Zones d'edition (TextBox) • 
Boutons • Cases a cocher (CheckBox) • Boutons radio (RadioButton) et hyperliens • Composant Slider • Barre 
de defilement (ScrollBar) • Calendrier (Calendar) • Composant DatePicker • Du code dans les applications 
Silverlight • Evenements • Creation dynamique d'objets • Creation dynamique a partir du XAML • Images, cur- 
seurs et videos • Clipping d'image • Sons et films • Deep Zoom • Tourneur de pages • Figures geometriques 

• Line, Polyline et Polygon • Path • Courbes de Bezier • Stroke • Dessiner avec Expression Blend • 
Transformations et animations • Liaisons de donnees • Avec TextBlock et TextBox • Boltes de liste • Grille de 
donnees • Acces aux fichiers • Stockage isole avec IsolatedStorage • Lire des fichiers distants ou locaux • 
Fichiers en ressources • Acces XML avec Linq • Chargement du fichier XML • Espaces de noms • Cas pra- 
tiques • Acces a distance aux donnees • Objet WebClient • Controles utilisateurs • Traitement d'evenements 
lies a un controle utilisateur • Creation et utilisation d'un controle utilisateur • Controle utilisateur en DLL • 
Styles et templates • Styles des composants Silverlight de Microsoft • Modification de controles avec Expression 
Blend • Interaction Silverlight/HTML • Blocs Silverlight dans une page Web • Acces aux elements HTML depuis 
Silverlight • Attacher des evenements • Appeler une fonction JavaScript ou C# • Animation Flash dans une 
page Silverlight. 



A qui s'adresse ce Mure ? 

- Aux programmers souhaitant realiser des sites Web de nouvelle generation 

- A tous les graphistes et designers ayant des notions de programmation 

Sur le site www.editions-eyrolles.com 

- Telechargez le code source des exemples du livre. 

- Consultez les mises a jour et complements. 

- Dialoguez avec I'auteur. 
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